Recreating the OS X Dock with CSS - ZURB Playground - ZURB.com The CSS The HTML <ul class="osx-dock"><li class="active"><span>ZURB</span><a href=" title="ZURB"><img src="/playground/osx-dock/zurb-icon.png" /></a></li><li><span>LinkedIn</span><a href=" title="LinkedIn"><img src="/playground/osx-dock/linkedin-icon.png" /></a></li></ul> Copyright ZURB, freely available for distribution under the MIT license. CSS ShortHand Property Cheat Sheet digg Shorthand properties can be used to set several properties at once, in a single declaration, instead of wasting your precious time and space making declaration for each individual property. With css shorthand we make our code less complicated and more readable for those who want to explore it. Unfortunately, quite a few shorthand properties are available, that`s why we`ve collected most useful and most used for you.
Beginners Guide To CSS & Standards - Friendly Bit In the chat channel I’m in, I get to talk to people on a daily basis that have never used CSS before, or are at the very beginning of learning it.. This article teaches all the basics you need to make your first CSS powered website. It is aimed at people that know a little HTML, and maybe have made a few websites themselves. Let’s get started. CSS is a language that adds style (colors, images, borders, margins…) to your site. It’s really that simple. Step by step CSS float tutorial Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Tutorial 2.
Creating Polaroid Style Images with Just CSS - ZURB Playground - ZURB.com Through a combination of browser-specific CSS (2 and 3) integration and some basic styling, we've turned regular old images into cool looking polaroid style images—with no additional markup to show the text. Using the Title Attribute Instead of adding additional markup (more headings or paragraphs), we've opted to reuse the content within the title attribute of the surrounding anchor tag. Since it's good practice to use proper title text, and it's really freaking cool to do stuff with just CSS.
Hover.css - Collection Of CSS3 Powered Hover Effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses
WDG Guide To Cascading Style Sheets Also available in Chinese, Japanese, and Spanish Style Sheets Now! Change the appearance of hundreds of Web pages by changing just one file... Influence presentation without losing visitors... Math in HTML (and CSS) - presenting mathematical expressions on Web pages Typesetting math: 100% How to present mathematical expressions using a language that has so little markup for them? Web authors often need resort to images, but there are more flexible approaches, like MathJax. Moreover, if you need just some special symbols or simple expressions, a lot can be done in HTML, assisted with style sheets (CSS). This document mainly discusses relatively simple mathematical expressions rendered one-dimensionally (inline), though possibly with superscripts or subscripts. The word “mathematical” is used in a rather broad sense here, covering different formalisms and symbols, including the symbols of physics, formal logic, etc.
CSS: Specificity Wars CSS: Specificity Wars Join me, and together we can rule the galaxy as father and geeks! A few weeks back in Cupertino, I saw Aaron explain how the specificity of CSS selectors is calculated in a way which I hadn't seen before. Then today I came across a knotty problem while building XHTML and CSS templates for a new project where two selectors behaved differently to how I expected and I realised that I had not completed my training. The Dark Side
An Awesome CSS3 Lightbox Gallery With jQuery Martin Angelov In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it. It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost). Test Your Browser For CSS3 Compatibility Home / CSS3 Selectors Test Is your browser compatible? After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.