So I've been using Html5 and CSS3 for the past 6 months+ but have just now started running into some pixel misses between firefox(17.0.1) and chrome(23.0.1271.101). I have a CSS reset that I tried but no change. It's weird in that in chrome (pic right side) it's 2 pixels in and in firefox (pic left side) it's 2 pixels out.
See for yourself here http://jsfiddle.net/976a3/2/
CSS:
body
{
margin: 0px 0px 0px 0px;
background:rgba(75, 75, 75, 1);
color:#c0c0c0;
}
#container
{
margin:0px auto;
padding:0px 0px 0px 0px;
width:300px;
height:350px;
}
#contact_info
{
margin:0px 0px 0px 75px;
padding:15px 15px 15px 15px;
width:270px;
height:150px;
border:1px solid black;
color:black;
background:rgba(200,200,200,1);
border-radius:20px;
box-shadow:7px 7px 12px rgba(0,0,0,1);
}
.title
{
font-size:1.3em;
margin:-10px 0px 0px -30px;
padding:4px 0px 0px 10px;
width: 235px;
height:30px;
color:white;
background:rgba(22,22,22,1);
border-top-right-radius:10px;
border-bottom-right-radius:10px;
text-shadow:0 0 3px rgba(192, 192, 192, 1);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset,
0 5px 10px rgba(0, 0, 0, 0.5) inset,
0 4px 6px rgba(255, 255, 255, 0.2) inset,
1pt 16px 0 -2px rgba(255, 255, 255, 0.2) inset,
0pt 16px 10px rgba(0, 0, 0, 0.3) inset,
0pt 1px 0px rgba(0, 0, 0, 0.2);
}
.title:after
{
top:40px;
left:-163px;
position:relative;
z-index:-2;
content: "";
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 10px solid rgba(22, 22, 22, 1);
}
Html:
<div id="container">
<div id="contact_info">
<p class="title">CONTACT INFO</p>
<br />
</div>
</div>
Any fixes or ideas?
Thanks
Instead of giving the .title:after position:relative, you can try giving it position:absolute; and give .title position:relative;
http://jsfiddle.net/976a3/3
Related
I am trying to make something similar to the button showed in picture.
I tried the following:
.button {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:red;
font-family:Arial;
font-size:12px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
The above CSS3 code gave me the following:
I am not sure how to make the same button with a border that looks similar to the picture.
first of all the 4 parts of the box shadow are x offset y offset and blur and the spread I did some tweaks to your code and got this output.
.button {
box-shadow: inset 0px 0px 5px 2px #000;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color: #ededed;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
</head>
<body>
<div class="button">
quit
</div>
</body>
</html>
There's no CSS property called qlineargradient so it's been removed. The box-shadow property in the example below has 3 values which makes layers top to bottom.
button {
display: inline-block;
padding: 6px 24px;
border: 1px solid #dcdcdc;
border-radius: 6px;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color: #fff;
cursor: pointer;
}
button:hover {
box-shadow:
rgba(50, 50, 93, 0.55) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
<button>QUIT</button>
I tried to cover shadow around all the blocks equally with help of CSS. I got no luck, because for some reason, one line ( the middle one ), wasn't aligning in a proper size, compared to other lines. As you can see it's thicker. I'm trying 2 days to find a solution, no luck so far.
.shadow1{
box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
width:250px;
height:200px;
background-color: rgba(0,0,0, .2);
position:relative;
}
.shadow2{
box-shadow: inset -5px 0px 0px 5px rgba(255, 255, 255, 0.4);
width:250px;
height:200px;
background-color: rgba(0,0,0, .2);
position:relative;
}
.shadow3{
box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
width:250px;
height:200px;
background-color: rgba(0,0,0, .2);
position:relative;
}
.shadow4{
box-shadow: inset -5px 0px 0px 5px rgba(255, 255, 255, 0.4);
width:250px;
height:200px;
background-color: rgba(0,0,0, .2);
position:relative;
}
<div class="shadow1"> </div>
<div class="shadow2"> </div>
<div class="shadow3"> </div>
<div class="shadow4"> </div>
I don't know well what you want exactly, but I can guess... is this what you want?
.shadow1{
box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
width:250px;
height:200px;
background-color: rgba(0,0,0, .2);
position:relative;
}
.shadow2{
box-shadow: inset -5px 0px 0px 5px #ddd;
width:250px;
height:200px;
background-color: rgba(0,0,0, .2);
position:relative;
margin-top:-5px;
}
.shadow3{
box-shadow: inset 0px 0px 0px 5px #ddd;
width:250px;
height:200px;
background-color: rgba(0,0,0, .2);
position:relative;
margin-top:-5px;
}
.shadow4{
box-shadow: inset -5px 0px 0px 5px #ddd;
width:250px;
height:200px;
background-color: rgba(0,0,0, .2);
position:relative;
margin-top:-5px;
}
<div class="shadow1"></div>
<div class="shadow2"></div>
<div class="shadow3"></div>
<div class="shadow4"></div>
I'd like to make this arrows in my site:
How can I make this one using css3 having a transparent background?
Thanks
You could use a font for the arrows and then CSS for the circles.
See working fiddle with Font Awesome:
http://jsfiddle.net/t2UA5/1/
<div class="halfCircleLeft"><i class="fa fa-angle-left"></i></div>
<div class="halfCircleRight"><i class="fa fa-angle-right"></i></div>
CSS
.halfCircleRight{
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:transparent;
-webkit-box-shadow: 4px 0px 25px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 4px 0px 25px 0px rgba(50, 50, 50, 0.75);
box-shadow: 4px 0px 25px 0px rgba(50, 50, 50, 0.75);
position:relative;
z-index:50;
}
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
background:transparent;
-webkit-box-shadow: -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
box-shadow: -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
position:relative;
z-index:50;
}
.fa.fa-angle-left {
color:#27367A;
font-size:30px;
position:relative;
z-index:150;
top:30px;
left:20px;
}
.fa.fa-angle-right {
color:#27367A;
font-size:30px;
position:relative;
z-index:150;
top:30px;
left:15px;
}
I think this code help you :
<div class="arrow-bg">
<div class="arrow">
</div>
</div>
.arrow-bg {
border-radius:30px;
box-shadow:-10px 0 8px #EDEDED;
padding:20px 15px;
width:30px;
}
.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
This is the simple arrow and now you can add shadows and so on...
<div id="some_div">some text</div>
<div id="arrow"></div>
#arrow {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid white;
float: left;
height: 1px;
}
I want to position multiple link buttons around an background image. Here is the HTML:
<body>
<div id="background">
<div id="abt">About Us</div>
<div id="ofc">Office</div>
<div id="staf">Staff</div>
<div id="msg">Message</div>
</div>
</body>
I want to position them around the background so that they stay fixed.
Example: http://jsfiddle.net/kimonante/2cvz4/1/
body {
background:url(http://www.factoryoutletstores.info/img/usa-map.gif) no-repeat;
background-attachment:fixed;
/*fix the shit*/
background-position:center;
}
.button-link {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
padding: 10px 25px;
background: #0d0f12;
color: #FFF;
font-family:arial;
font-weight:600;
display:block;
}
.button-link:hover, .button-link:focus {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.button-link:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
a {
text-decoration:none;
color:white;
width:100px;
text-transform:uppercase;
padding-left:18px;
}
#abt {
margin-left:540px;
margin-top:200px;
}
#ofc {
margin-left:160px;
margin-top:105px;
}
#msg {
margin-left:930px;
margin-top:-240px;
}
#staf {
margin-left:360px;
margin-top:260px;
}
As your buttons are positioned by pixels, you need to set your div#background to a fixed size and set the background to the div#background instead of the body.
Also remove the background attachement. This version works: http://jsfiddle.net/BTVZz/
Refering to the css effect from: Best way to do this kind of drop shadow?
How (if at all) could it be possible to apply the same effect also on the top of an image?
Try
http://jsfiddle.net/mPnTP/433/
body {
padding:20px 0 30px;
font:14px/1.5 Arial, sans-serif;
text-align:center;
color:#333;
background:#FAF0D9;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
top:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
You can put another div arround with png shadow aligned on top, or you can use CSS multiple backgrounds (doesn't work on all browsers)