how to create css gradients and shadow
Tags: html5,css3,svg,gradient
Problem :
I am trying to create a border bottom gradient similar to the image below..
Just wondering if this can be achieved using css ?
Solution :
.myshadow
{
position:relative;
width: 100px;
height: 80px;
-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;
}
.myshadow:before, .myshadow:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.myshadow:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}<div class="myshadow"></div>CSS Howto..
Here is a way. I used this and got working with good performance on Android. <div id="container"> <style class="search-style" type="text/css"></style> <input type="text" class="search" /> <div class="content" data="archana">Archana</div> <div class="content"...
It's impossible to say from your question what's left behind when all instances of .gridBox disappear from their parent .mainCont element, but the solution would be to put all of...
You can check the scroll height and alter the CSS via jQuery using the .scroll() event Fiddle: http://jsfiddle.net/UR5wP/...
You can target the hover elements by its class news and find the target element by appending the last digits in the hovered element's id to news_img like $(document).ready(function ()...
UPDATE: This is not possible without using some type of a preprocessor like SASS or LESS. Below answers are not answering the question, I've left them in case they might...
While not exactly what I wanted, I eventually found a way to create a CSS that doesn't contain too much redundancy. Many thanks to @James_D for helping out! Here's the...
You could do a combination of border-radius rules for each browser. However, I find this to be way too tedious for small images like that. Do a .png or .jpg...
Try like this:- #intro2{ background-color: #b0e0e6; width: 50%; margin: 0 auto; font-size: 1.5em; padding: 5px; } .clear{ clear: both; } #intro2 .image{ float:left; width:50%; background-color: #aaaae6; } #intro2 .text{ float:...
To control this kind of resize events use @media CSS rule @media only screen and (min-width: 700px) { // CSS style for +700px } @media only screen and (max-width: 700px)...
use word-wrap: break-word; this is what worked for me
Not perfect but it's working: http://jsfiddle.net/coma/9p2CT/ Remove the real selection ::selection { background-color: transparent; } Add some styles span.highlight { background: #ADD6FF; } span.begin { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }...
Whenever you add a css file to the page, it applies to the whole document. However looking at your code, what I think you're trying to do is display 1...
The information you want to be in the modal window, you need to put in a seperate location. What you are doing by saying $(".previouslink").modal(); Is that you want all...
Attach hover event to ul: HTML: <ul id="list"> <li><a id="homeBox" href="#">Home</a> </li> <li><a id="homeSub" href="#">you</a> </li> </ul> JS: $(function() { $("ul#list").hover(function() { $("#homeSub").toggle("slow"); }); }); ...
Mobile browsers don't have the device's resolution. There are two standard mobile widths: 320px and 360px. Google Nexus and Samsung Galaxy Note ( and Note 2 ) have a width...
I’m a bit confused by your Django template code. You say you can have any number of books displayed on the page. What context are you passing to your Django...
Try including the css file to see if you are satisfied with the result. It should work, but if you want it to look different you should include your own...
I am able to show the icons with hover effect using code: ul.statuses .buttons{ display: none; } ul.statuses li:hover .buttons { display: inline-block; } And the html code for showing...
You need to remove your float:left property from your pac man class, and add a text-align:center to your wrapper class. Text-align; This property describes how inline-level content of a block...
You will have to make the text's parent full width. To do that, remove the back color and width definition from the .alta div, and create an inner absolute div...
Try displaying your buttons as inline-block. Right now, they are rendered as inline, which means they do not have their own box model and can get broken up into multiple...
More specific CSS will override less specific css. So if you can use the class name as well as the type of item inside of your style tags that might...
Download the module from http://jqueryui.com/download ticking the appropriate boxes, this will deliver a single minified js file (and the required jquery library) as well as a directory containing all the...
You can change the #mainnav li as from float: left; to display: inline-block; #main-nav li { position: relative; margin: 0 auto; padding: 0; list-style: none; display: inline-block; } and then...
You cannot access the content of the iframe if its loaded from a different domain. Like your parent page is abc.com and the content in your iframe is from xyz.com
You can apply your styles in the formfield by adding extra attributes like this: myfield = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'})) I also saw a neat solution where someone created a custom template tag...
You're looking for min-width. div{ width:50%; /* Your dynamic width */ min-width:300px; /* The narrowest the element can be */ } http://jsfiddle.net/ejbSd/...
I used IE9 using Developer Tools and seems like it's working perfectly for me. Guess you messed up your developer tools and I assume you have IE8 Standards View turned...
Use html like this <div class="load"> <img src="../path"> </div> And the css is .load{background-color: Gray; filter: alpha(opacity=80); opacity: 0.8; z-index: 10000; text-align:center; position:absolute;} may it will help you...
I was confronted with this same issue a few days ago, and I came here to search for an answer, which I found with no problem. I had to put...