background preloader

Cascading Style Sheets

Facebook Twitter

CSS Lifted corner Drop Shadow. .box{ width:200px; height:100px; .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 { -moz-border-radius:4px; border-radius:4px; .lifted:before, .lifted:after { bottom: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);

CSS Lifted corner Drop Shadow

Samples. CSS Design: Taming Lists. As early as July of 1999 I was pontificating on email lists about the virtues of style sheets.

CSS Design: Taming Lists

Some things never change. What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. For example, I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such. Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area. In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. Setting the stage#section1 For purposes of this article, I am using unordered lists. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 we'll make a bit longer so that it will wrap</li></ul> Positioning#section2 Note that the markers lie outside of the DIV.

The Shapes of CSS. Top 13 HTML5 – CSS3 frameworks to spice up your projects. HTML5 and CSS3 represent the near future of the web.

Top 13 HTML5 – CSS3 frameworks to spice up your projects

The last versions of all major browsers support many of the new features introduced by these versions. If you want to try the new HTML5 properties (Canvas, Geolocalization, …) or new CSS3 rules (media queries, …) you can also use the frameworks examined in this article. These frameworks are used to create your HTML5/CSS3 templates, to develop your mobile applications, to draw graphs easily and much more. Read on to choose your next framework. 52Framework 52Framework is a new framework built specifically for utilizing HTML5 and CSS3 in a cross-browser, standards-compliant manner. HTML5 Use of all the most useful current html5 tags including: header, nav, section, article, footer, and more to come soon (with styling)Use of the all new <! Link: Baseline Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography.

Link: Less Framework 2 Everyone writes CSS differently. Link: Css3. CSS-Tricks.