CSS generated content can solve this for you: div { position: relative; } /* Main div for border to extend to 50% from bottom left corner */ div:after { content: “”; background: black; position: absolute; bottom: 0; left: 0; height: 50%; width: 1px; } <div>Lorem Ipsum</div> (note – the content: “”; declaration is necessary in … Read more
As the name implies, :nth-child() allows you to construct an arithmetic expression using the n variable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication (an where a is an integer, including positive numbers, negative numbers and zero). Here’s how you would rewrite the above selector list: div:nth-child(4n) For … Read more
The height of a block element defaults to the height of the block’s content. So, given something like this: <div id=”outer”> <div id=”inner”> <p>Where is pancakes house?</p> </div> </div> #inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #inner. When you specify the … Read more
You can make the border transparent. In this way it exists, but is invisible, so it doesn’t push anything around: .jobs .item { background: #eee; border: 1px solid transparent; } .jobs .item:hover { background: #e1e1e1; border: 1px solid #d0d0d0; } <div class=”jobs”> <div class=”item”>Item</div> </div> For elements that already have a border, and you don’t … Read more
Yes, it is possible using filter: dropShadow(x y blur? spread? color?), either in CSS or inline: img { width: 150px; -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222); } <img src=”https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png”> <img src=”https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png” style=”-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);”>
You can use :enabled pseudo-class, but notice IE<9 does not support it: button:hover:enabled{ /*your styles*/ } button:active:enabled{ /*your styles*/ }
I know this is a really old thread, but it shows up at the top in Google, so here’s another option. This one is pure CSS, and doesn’t require any extra HTML. box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2); There are a surprising number of uses for the box-shadow feature.
Yes, you can apply CSS to SVG, but you need to match the element, just as when styling HTML. If you just want to apply it to all SVG paths, you could use, for example: path { fill: blue; } External CSS appears to override the path’s fill attribute, at least in WebKit and Gecko-based … Read more
Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more “slick”, but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not. The fix: In your css include – ::-webkit-scrollbar { -webkit-appearance: none; … Read more
This code “div.test th, td, caption {padding:40px 100px 40px 50px;}” applies a rule to all th elements which are contained by a div element with a class named test, in addition to all td elements and all caption elements. It is not the same as “all td, th and caption elements which are contained by … Read more