Is it possible to create shadows like the shadow of Apple's environment-information sheets with CSS3?
(source: apple.com)
The solution doesn't have to be cross-browser compatible.
Check out the demo on this site:
http://lab.galengidman.com/css3stickynote/
They do something really similar in pure CSS with a bunch of :before and :after voodoo.
Here is the particular code they use for the shadow effects:
#stickynote:before {
content:'';
display:block;
width:90%;
height:20%;
position:absolute;
left:10px;
bottom:3px;
background-color:rgba(0,0,0,.5);
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
opacity:1;
z-index:-1;
}
#stickynote:after {
content:'';
display:block;
width:90%;
height:20%;
position:absolute;
right:10px;
bottom:3px;
background-color:rgba(0,0,0,.5);
-o-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
opacity:1;
z-index:-1;
}
Yes. See this blog post and the demo page for how it's done
Related
I have a product configurator on my website. The user can write a word on a clothe and a text appears on the product image.
I want to style this text to look like an embroidery. So i put a text shadow, the text color changes in function of the product color, but now, i want to put a "filter" over the color.
Constraint: i just have access to the CSS.
here's a fiddle i did:
#text
{
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
-webkit-font-smoothing:antialiased;
text-shadow: 2px 2px 2px black;
color:lightblue;
}
#text:after
{
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg');
-webkit-background-clip:text;
-moz-background-clip:text;
-webkit-text-fill-color:transparent;
}
http://jsfiddle.net/u2to713t/
Thanks in advance.
I Finally did it..
The result is not what i expected but it works.
Here's the final fiddle for the one who will try one day to do the same thing:
http://jsfiddle.net/u2to713t/13/
#text
{
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
-webkit-font-smoothing:antialiased;
text-shadow: 1px 2px 3px #474747;
color:lightblue;
}
#text:before
{
content: attr(data-text);
position:absolute;
left:-1px;
top:7px;
right:0;
bottom:0;
opacity:1.0;
z-index: 1;
color:transparent;
text-shadow:0px 0px 0px;
background:url("http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png");
-webkit-background-clip:text;
-moz-background-clip:text;
background-clip:text;
}
you can add background image to a transparent text with with transparent text shadow using rgba
#text{
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
-webkit-font-smoothing:antialiased;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
color:transparent;
background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg');
-webkit-background-clip:text;
-moz-background-clip:text;
-webkit-text-fill-color:transparent;
}
is this what u mean?
#text {
background: url(http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
}
I have created a custom class for some sliders.In chrome everything is working fine.See image below:
Chrome
My problem though is that on internet explorer i get this:
Now here is my css:
input[type="range"].slider-black::-ms-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);
}
input[type="range"].slider-black::-webkit-slider-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);
}
Is there any way to do my ::-ms-thumb look exactly the same as it is on chrome?
The trick is to apply a margin, half the width of thumb-button, in the ::-ms-track.here's an online demo
I make a simple selector like this:
when I make the float:right, I got this:
please see the red circle to know what is the problem.
css
/* The CSS */
select {
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:right;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f8f8f8;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
label {position:relative}
label:after {
content:'<>';
font:11px "Consolas", monospace;
color:#aaa;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:2px;
padding:0 0 2px;
border-bottom:1px solid #ddd;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:6px; top:0px;
width:20px; height:20px;
background:#f8f8f8;
position:absolute;
pointer-events:none;
display:block;
}
the float:right that I changed, and that is making the problem, exist in the select in the css
Its a little tricky to identify without more HTML/CSS but it seems to be because the selection box and the element circled in red are two seperate elements and you've only floated one.
What you may want to do is wrap both in a div and apply float:right to this. This will mean that everything within the div is floated (both the selection box and the element encircled)
although my questions has been answered lots of times before, but all the proposed solution I have tried and nothing seems to work.
what am trying to do is a big div that contains li tags; the li tags will also contain anchor tag, 2 divs and p tag.
to understand the big picture.. am trying to make a posting wall (activity-board), the wall will have posts looks like a bubble (div post) and the bubble will point (post-arrow) to a thumbnail image (a thumb3), to make the bubble style I made the post div absolute positioned with z-index less than the arrow-post.
and here is my css:
.activity-board {
background:#fff;
width:600px;
min-height:652px;
height:auto;
border:solid 2px #e7d28d;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
float:left;
margin-left:20px;
}
.post-body{
position:relative;
display:block;
list-style-type:none;
width:600px;
height:auto;
background:#f9f9f9;
border-bottom:1px solid #CBCBCB;
border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
background: #fff;
float:left;
overflow:visible;
clear:both;
z-index:9;
}
.post{
position:absolute;
width:500px;
line-height:20px;
height:auto;
background:#FFF;
display:block;
margin-top:22.5px;
margin-left:77px;
text-align:left;
float:left;
z-index:1;
}
.post-arrow{
position:relative;
margin-top:32px;
margin-left:6px;
width:12px;
height:18px;
background:url(images/post-arrow.png);
float:left;
z-index:5;
}
.post p{ color:#025373; padding:8px; word-wrap:break-word; }
a.thumb-3 {
margin-top:18px;
display:block;
margin-left:18px;
width:46px;
height:46px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index:10;
float:left;
}
a.thumb-3 img{
padding:0;
margin:0 auto;
width:46px;
height:46px;
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
here is my html:
<ul>
<li class="post-body">
<a class="thumb-3"><img src="images/Alsheikh Center (177).jpg" /></a>
<div class="post-arrow"></div>
<div class="post">
<p>
Hi there!
</p>
</div>
</li>
</ul>
http://jsfiddle.net/r9YpX/
Everything worked fine but the li tag does not expand to the content.. it only expands if I change the position of the post div to relative not absolute, which I cant change because it must be absolutely positioned under the arrow image to give it the bubble look.
any help would be appreciated.
Thanks.
ok Thanks guys i figuered it out.. I made position:relative and changed margin for post div and it worked! I thought I did this but perhaps I did something wrong that make it not work
I have a big problem to make my site comp. with older browsers.
I use label+input text on many parts of my site. Somewhere IE7 did not show the background of the label.
The css of the label for login:
label[for="login"] {
-moz-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
I use this same code an other page for an other label:
.formField label {
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
And the 2nd is work well. The first work well on other browsers.
What should be wrong? Im pullin out my hair..
I hope, IE7 won't support Attribute selectors (label[for="login"]). When I check with w3c it will work if we put doctype.
Here is the example:-
http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_value
More details Here
http://www.w3schools.com/css/css_attribute_selectors.asp
Yes, it is not supporting
[for="login"]
To make it work in IE7 and compliant browsers, use this selector:
label[for="login"], label[htmlFor="login"]
For details on this IE7 bug, see: http://reference.sitepoint.com/css/attributeselector#compatibilitysection
IE7 doesn't let you select labels with the 'for' attribute. Other attributes work, but trying to select an element either of these ways won't work:
label[for=test],
label[for] {
/* THIS CODE WILL BE IGNORED */
}
You'll have to select the element another way, such as with an ID or a class instead.
IE7 also has problems using attributes for the selections of other elements. For example, trying to do table th[cellpadding=0] as a selector won't work either.