As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.
Tag: css
Stylize selects across all browsers with little effort.
custom syntax support
works perfect as an inline-block
no z-index bugs in IE
optgroups support
great API
add/remove option’s and optgroup’s
disable/enable anything (select, optgoup, option)
optional filter text field
can be used with hidden parents
compatible with mobile devices
behavior is as authentic as possible
callbacks and event triggers
Centered Vertical and Horizontal Align of elements in css
In this tutorial, we will see how to center align:
horizontaly an element with a fixed width
horizontaly an element with no specific width
verticaly an element with a fixed height
verticaly an element with no specific height
horizontally and vertically an element with fixed measure
horizontally and vertically an element with no specific measure
horizontally and vertically a single line of text
Tutorials | Codrops
A whole bunch of great CSS tutorials
Delta – A Free jQuery UI Theme | Kiandra IT Blog
Kiandra is pleased to announce the open sourcing of a jQuery UI theme we think you’re going to love. We have been using the “Delta” theme for the better part of a year and made the decision to share it with the community. We’re hoping this results in plenty of feedback as well as the continued development of the theme. It’s free for commercial, personal and educational use as part of the MIT or GPL license.
Ajax Bestiary: SilkSprite Blueprint Plugin
Silk Sprite is a Blueprint CSS plugin providing the Popular Silk Icon Package in CSS Sprite form to improve peformance and ease of use
CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
Getting Started Using HTML5 Boilerplate
Getting started building HTML5 compatible sites can be challenging especially for people who haven’t been involved in Web development projects for awhile. Fortunately, there are a few sites available that greatly simplify the process of getting started building HTML5 websites and offer some excellent “boilerplate” code that can help both new and experienced Web developers.
Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.
RocketBar – A jQuery And CSS3 Persistent Navigation Menu
The way it works is that when a user lands on your page they get to see the default navigation as usual. If they decide to start scrolling however, the top navigation detaches itself from the page and follows you as you scroll down. If you decide to go back to the top of the page (for whatever reason) the navigation goes back to the way it appeared before. This technique isn’t just limited to showing you the default menu in a way that detaches itself from the page, but the code could very easily be modified to show a completely different menu for those that scroll down
jRumble | A jQuery Plugin That Rumbles Elements
jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.
Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab
If you have a image gallery with different width and height for each image, your page may look messy. Use this plugin to align your gallery with a ‘Google Image Search’ style result.
The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it.
jquery-mobile-960 is a port of 960 grid to jquery mobile. It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets.
Treesaver® is JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS.
jQuery plugin intended to reproduce the special effect we have seen recently on Apple.com (new MacBook Air, The Beatles on iTunes, etc.)
HTML5 Boilerplate – A rock-solid default template for HTML5 awesome.
HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.
After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.
A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML.
* Lightweight script
* No images required
* No external CSS
* Resolution independent
* Alpha transparency
* Highly configurable appearance
* Works in all major browsers
* Uses feature detection
* Degrades gracefully
The HTML file contains a rudimentary HTML5 document structure, with all the every day stuff like title, header, footer, etc. It also uses conditional comments to call about half a dozen IE-specific CSS files, as well as a couple popular IE-correcting javascript files.
All supporting files are stored in a parent “_” folder — this keeps the view in our file manager uncluttered. We could call it something like “assets,” but we prefer to give it a name that ensures it stays at the top of the list (which is why the CSS folders are prefixed with underscores).
In the CSS folders are baseline styles designed to reduce the visual design in any browser to its most basic state. This frees you from the annoyance of overcoming the native styling that each browser wants to apply to HTML elements such as h1, p, and ul. From this starting point it’s very easy to establish your own standards for type size, margins, and other measurements.
Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.
Load More