I am trying to create an object with a drop shadow. I believe you need CSS3 to do this and I have something like this so far.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Add box shadows:
#thediv
{
width:300px;
height:100px;
-moz-box-shadow: 10px 10px 5px #888; /* firefox shadows*/
-webkit-box-shadow: 10px 10px 5px #888; /* chrome / safari shadows */
box-shadow: 10px 10px 5px #888; /* general browser support */
}
example on this fiddle but as a note, as this is CSS3 and IE6/7 are old, it will not work with them.
Add this style into your div tag
-moz-box-shadow: 10px 10px 5px #888888;
/* Firefox 3.6 and earlier */
box-shadow: 20px 20px 55px #888888;
Related
I want to show the box shadow on every side except bottom.
Here is the css I'm using.
box-shadow: 0 0 12px 4px #ddd;
How to remove bottom shadow from it?
You can't change the dimensions of the shadow across one axis only (i.e you can't reduce just the height of the shadow). One trick is to add the shadow to a pseudo element and reduce the height of that element.
.shadow {
margin:20px;
width:400px;
height:200px;
background:red;
position:relative;
}
/* Pseudo element for adding shadow */
.shadow:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:16px;
box-shadow: 0 0 12px 4px #999;
z-index:-1;
}
<div class="shadow"></div>
You can use the negative value to push it off the edge.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 0px -4px 12px 4px #888888;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
you may use more than 1 shadow:
body {
box-shadow:
-12px -10px 12px -4px /* negative value here decrease the size */#ddd,
12px -10px 12px -4px #ddd,
inset 0 -3px lime /* demo , show bottom */;
padding:4em 8em;
background:gray;
}
/* demo purpose */
html {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
it can draw things like this
I have created a simple html file containing 2 buttons and one text box.
What I don't understand is that the height of my various elements is set equally to 20px for all elements, but they don't seem to be very well aligned (vertically). Even more frustrating, I was expecting my + and - buttons to be center aligned both on the vertical and the horizontal axis.
Do you have any idea what I have missed ?
Many thanks for your kind help.
Contents of 'form.html' :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Form | 24ways.org</title>
<link rel=stylesheet href=style.css>
<script>
</script>
</head>
<body>
<input type="text" name="country" class="resizedTextbox" value="20" readonly>
+
-
</body>
</html>
Contents of 'style.css' :
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #0815cc;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 0 10px 10px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:20px;
}
.myButton:hover {
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}
.resizedTextbox {width: 50px;
height: 20px;
padding: 0 10px 10px 10px;
border-color:#3e12cc;
text-shadow:0px 1px 1px #154682;
background-color:#f5effb;
}
If you want vertical centering on the buttons (which are already using display:inline-block;), you can just use vertical-align. I do this all the time with buttons and icons. Just adjust as needed, i.e. vertical-align:-1px. You can use positive and negative values for vertical-align. You might need your input to have the same display. You could also try adding a margin to the top of the buttons. If that doesn't work, change the buttons to display:block;, use float:left;, and then add margin-top. Haven't tested but this is how I would approach it.
You are not accounting for the 2px top and bottom border on the input field, add 2px to the height of the buttons. https://jsfiddle.net/u8v3rgyt/4/
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #0815cc;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 0 10px 10px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:22px;
}
I'm working on a input text with image and I'm trying to position the image on the right side corner of the input text and it seems that my top positioning has different output in different browsers. So I have this HTML structure like so:
<div class="bcb-box-left-content">
<input type="text" name="skills" id="skills"/>
<img src="assets/images/plus-in-box.png" alt=""/>
<p>Maxiumum 3 skills for a guest account.</p>
</div>
And here is the style for that:
/*----the parent container-----------*/
.bcb-box-left-content
{
max-width:444px;
margin-left:17px;
position:relative;
margin-right:20px;}
/**********the anchor *********/
.bcb-box-left-content a
{
position: absolute;
bottom: 0;
right: 4px;
top:5px;
}
/**********the input text *********/
#skills {
width:100%; padding: 10px 20px 10px 10px;
}
So now is there any approach like this (but not literally the code itself):
/*in this case TOP for chrome*/
-webkit-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for mozilla*/
-moz-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for normal*/
box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
DEMO:
http://jsfiddle.net/leonardeveloper/Wm4ML/
Apply margin and default border property to your #skills class. It will give the same result on all the browsers as you mentioned. Update your CSS like below.
#skills
{
width:100%;
padding: 10px 0px 10px 10px;
margin:0;
border:1px solid #ccc;
}
DEMO
I'm attempting to recreate the shadow from the image below:
It's the shadow between the two colors I'm trying to recreate using box-shadow. But I can't figure it out.
Here's my code:
box-shadow: inset 0 0 2px 0px #000000;
The shadow appears on both sides and is too strong compared to what I'm trying to achieve. Any suggestions?
I've made the below fiddle from complete scratch, you can use it if you like it
Demo
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
.one {
background: #B4B300;
height: 100px;
}
.two {
background: #FD370A;
height: 100px;
box-shadow: 0 0 5px #212121;
}
.three {
background: #fff;
height: 5px;
}
Instead of using inset shadow, am using a shadow which renders from all sides, right left are hidden as the div spans entire row, the shadow at the bottom is hidden with another div using background: #fff;
Note: I forgot to add -moz and -webkit prefixes so be sure you use
them if you want to support the older browsers too.
http://jsfiddle.net/CQvBb/
<div class="first"></div>
<div class="second"></div>
.first {
background:#B4B300;
width:500px;
height:100px;
box-shadow: inset 0 -5px 5px -5px #000000;
-moz-box-shadow: inset 0 -5px 5px -5px #000000;
-webkit-box-shadow: inset 0 -5px 5px -5px #000000;
}
.second {
background:#FD370A;
width:500px;
height:100px;
}
It is my understanding that a display:block will automatically start in a new line. Why do the boxes collapse when a float:left is introduced inside a div with display:block? Here is a fiddle and below the code
#wrapper {
width:300px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #a39b8b;
background-color:#fff;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;}
#header { width: 100%; display: block; }
#logo { width: 100px; height: 145px; background: #fde; }
#slogan {
display: block; background: #f9ebcd; height: 35px; -moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888; box-shadow: 0px 3px 10px #888; border: 1px solid red;
}
.left { float:left;}
<div id="wrapper">
<div id="header">
<div id="logo"class="left">left</div>
</div>
<div id="slogan">slogan</div>
Floats move an element out of the normal flow of the page. If there's nothing left in the flow inside a containing element, it will 'collapse'.
Check the specs for more info.
I recommend you familiarize yourself with clearfix. It makes life easier.
Your example (revised): http://jsfiddle.net/HkHTk/4/
That's just what happens with float.
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
The fix:
#wrapper {
overflow: auto;
}
Demo: http://jsfiddle.net/mattball/CjXNW/
You need to clear your float using the CSS clear property.
What are you trying to do? If you want the slogan box to appear beneath the logo box, you need to add clear:both; to the #slogan code.