12 Fun CSS Text Shadows You Can Copy and Paste | Design Shack
3 days ago by buda
Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity.
Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.
css
css3
font
shadow
snippets
Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.
3 days ago by buda
Making Wordpress images responsive - Blissful Interfaces
4 days ago by buda
For the images that are in a post or a static page/template page, all you have to do is, add the above CSS to the style.css file, and then remove the ‘width’ and ‘height’ properties from the < img > tag in your WordPress editor. That’s it!
But for the image that are displayed dynamically by WordPress, such as post thumbnails, the width and height needs to be removed dynamically using a function.
css
images
responsive
wordpress
But for the image that are displayed dynamically by WordPress, such as post thumbnails, the width and height needs to be removed dynamically using a function.
4 days ago by buda
adamstac/animate.sass · GitHub
4 days ago by buda
Sass and Compass CSS animation library based on Animate.css
animation
css
css3
framework
sass
4 days ago by buda
Introducing EnhanceJS: A smarter, safer way to apply progressive enhancement | Filament Group, Inc., Boston, MA
5 days ago by buda
Introducing EnhanceJS, a JavaScript framework designed specifically to deliver a usable experience to the widest possible audience, by testing the browser to determine whether it is capable of correctly supporting a range of essential CSS and JavaScript properties, and delivering features only to those that pass the test.
css
css3
enhancement
javascript
progressive
5 days ago by buda
Free Zocial Button Set: Social CSS3 Buttons | Smashing Coding
12 days ago by buda
The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.
The button set was designed from the beginning to require no extra markup, and the elements used are entirely the choice of the (semantically considerate) designer. All buttons are fully scalable and customizable, and they degrade gracefully on older browsers, although the aesthetics in IE 6 and 7 are admittedly inferior to image-based alternatives.
buttons
css
css3
webdesign
The button set was designed from the beginning to require no extra markup, and the elements used are entirely the choice of the (semantically considerate) designer. All buttons are fully scalable and customizable, and they degrade gracefully on older browsers, although the aesthetics in IE 6 and 7 are admittedly inferior to image-based alternatives.
12 days ago by buda
SlickMap CSS — A Visual Sitemapping Tool for Web Developers - Astuteo™
12 days ago by buda
SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.
The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of site maps while at the same time allowing for the pre-development of functional HTML navigation.
css
design
tools
webdesign
maps
planning
websites
The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of site maps while at the same time allowing for the pre-development of functional HTML navigation.
12 days ago by buda
jhardy/compass-ceaser-easing · GitHub
17 days ago by buda
A compass extension based on ceasar css easing animation tool by @matthewlein This extension provides transitions based on the classic Penner equations from Flash and jQuery.
animation
css
easing
sass
compass
17 days ago by buda
Using CSS3 Transitions, Transforms and Animation
17 days ago by buda
First things first - these demos are showing of CSS transitions, transforms (2D and 3D) and animations. Currently (January 2012), 2D transforms are available in all current browsers including IE9, transitions are available in all browsers except Internet Explorer 9 and less, while 3D transforms are in Safari, Chrome, Firefox and IE10 and up. Animations are available in Safari, Chrome, Firefox 5+ and IE10. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won't get animation. 3D transforms generally don't degrade nicely, so be careful when using them.
css3
animation
css
17 days ago by buda
Handy Roundup of CSS3 Generators and Tools
17 days ago by buda
With the latest advances in CSS3 many of the effects that were once only achievable in Photoshop can now be replicated in CSS code, but it’s sometimes difficult to visualise the appearance of these effects when staring at a few lines of syntax. This is where CSS generators come in handy, this roundup of tools makes it easy to create the exact CSS effects you need with the help of graphical interfaces.
css
css3
generator
tools
17 days ago by buda
Google HTML/CSS Style Guide
27 days ago by buda
This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.
css
google
html
style
27 days ago by buda
File: SASS_REFERENCE
27 days ago by buda
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.
css
framework
reference
sass
27 days ago by buda
960 Grid on jQuery-Mobile - merge 960.gs flexibility with jquery-mobile ease
4 weeks ago by buda
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.
css
grid
jquery
mobile
tablet
4 weeks ago by buda
Automatic responsive images in WordPress | Viewport Industries
5 weeks ago by buda
As Elliot mentioned in our first post we wanted to try out a few relatively new techniques on this site, the main one being the inclusion of Josh Emerson’s Responsive-Enhance script to serve resolution-dependent images.
The simplest way to see the script in action (if you are using a desktop browser) is to resize this screen so that it’s very narrow and hit refresh; all being well the image above should turn into a black and white version, physically smaller in terms of dimensions and file size. Now slowly stretch the screen out again and you should see the colour version kick back in. Josh’s script cleverly replaces the lo-res version with the full size colour version — nice and easy.
design
images
responsive
webdesign
wordpress
css
jquery
The simplest way to see the script in action (if you are using a desktop browser) is to resize this screen so that it’s very narrow and hit refresh; all being well the image above should turn into a black and white version, physically smaller in terms of dimensions and file size. Now slowly stretch the screen out again and you should see the colour version kick back in. Josh’s script cleverly replaces the lo-res version with the full size colour version — nice and easy.
5 weeks ago by buda
Superfish - Suckerfish on 'roids
5 weeks ago by buda
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:
css
javascript
jquery
menu
navigation
5 weeks ago by buda
thegorgon/jpop · GitHub
5 weeks ago by buda
jPop is jQuery plugin for making iPad style popovers. The plugin comes with a default skin modeled off the iPad style, but the popovers can be skinned with images to any style.
jquery
popover
pop
window
modal
ipad
mobile
css
js
javascript
5 weeks ago by buda
LESS « The Dynamic Stylesheet language
5 weeks ago by buda
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
css
development
framework
webdesign
ruby
5 weeks ago by buda
Using Less CSS, BluePrint and WP for a Faster Workflow | Wptuts+
5 weeks ago by buda
Less.CSS is becoming a popular tool for making stylesheets “dynamic”. I’ve been working with integrating Less.CSS with WordPress for a while now, so today we’re going to be looking at a short tutorial on how to get started with using it and the BluePrint CSS framework for a faster workflow in WordPress.
less
tutorials
wordpress
css
5 weeks ago by buda
Crunch! - The tastiest LESS editor
5 weeks ago by buda
The LESS editor and compiler that almost makes it too easy
less
apps
css
editor
software
5 weeks ago by buda
LESS.app For Mac OS X
5 weeks ago by buda
{Less} extends CSS with variables, nested rules, operators and more. If you're still building websites without it, you're an idiot. This app makes it dead simple to use {Less} by automatically compiling *.less files into standard CSS.
css
development
less
mac
osx
5 weeks ago by buda
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
6 weeks ago by buda
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:
grid
responsive
framework
css
html
6 weeks ago by buda
Golden Grid System
6 weeks ago by buda
Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
css
design
framework
grid
webdesign
6 weeks ago by buda
adactio/Pattern-Primer · GitHub
7 weeks ago by buda
Create little snippets of markup and save them to the "patterns folder." The pattern primer will generate a list of all the patterns in that folder. You will see the pattern rendered as HTML. You will also get the source displayed in a textarea.
You should be able to take the whole "pattern-primer" folder and drop it into your own project (assuming you're running PHP) BUT make sure to update the link element in the head of pattern-primer/index.php to point to your own CSS.
css
html
patterns
php
You should be able to take the whole "pattern-primer" folder and drop it into your own project (assuming you're running PHP) BUT make sure to update the link element in the head of pattern-primer/index.php to point to your own CSS.
7 weeks ago by buda
Gimme Bar
7 weeks ago by buda
Website style guides for every taste.
collection
css
design
development
7 weeks ago by buda
Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page
10 weeks ago by buda
Do you see the full-sized background image on this page? In a nutshell, that's what Backstretch does. It will stretch any image to fit the page, and will automatically resize as the window size changes.
css
image
javascript
jquery
plugin
10 weeks ago by buda
jQuery Masonry
11 weeks ago by buda
A dynamic layout plugin for jQuery
The flip-side of CSS floats
css
javascript
jquery
layout
plugin
The flip-side of CSS floats
11 weeks ago by buda
Progressive And Responsive Navigation | Smashing Coding
11 weeks ago by buda
Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments.
css
css3
design
navigation
11 weeks ago by buda
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8
february 2012 by buda
Emulate CSS3 pseudo classes in IE
css
css3
ie
ie6
javascript
february 2012 by buda
How nth-child Works | CSS-Tricks
february 2012 by buda
how to target every n of elements with css
css
css3
webdesign
target
customize
february 2012 by buda
The Semantic Grid System
january 2012 by buda
Just released version 1.1 of the Semantic Grid System. Adds offsets, uses micro clearfix, and supports SCSS and Stylus.
Tools
CSS
framework
grid
less
webdesign
january 2012 by buda
Kotatsu
august 2011 by buda
Easy table maker
Barra_de_marcadores
Utilidades
webdesign
css
design
webdev
web
august 2011 by buda
Jan Quickels // Web-Typography-Tool zur Berechnung von CSS-Typosets in em und px
august 2011 by buda
Web-Typography 2 Beta: CSS-Typoset Matrix and code generator
Barra_de_marcadores
Utilidades
tools
webdesign
fonts
generator
type
web
typography
css
august 2011 by buda
Simple JQuery Accordion menu - Version 3
december 2010 by buda
This is a simple menu done in JQuery. It's an evolved version of the menu first presented in this weblog entry.
I've got information man! New shit has come to light!
--Jeff Bridges as 'The Dude' in The Big Lebowski
* Now supports nested accordions (1 level, more is madness)
* Adds a class 'active' to any active (opened) item
* Now supports panels that can contain anything
There is no cookie stuff. Please control state through your page (generation) code by adding the expand class to items that need to be expanded t page load time.
If this plugin is useful for you feel free to download it and use it on your website.
This plugin is discussed on my blog in this post.
jquery
menu
javascript
code
webdesign
css
howto
navigation
accordion
I've got information man! New shit has come to light!
--Jeff Bridges as 'The Dude' in The Big Lebowski
* Now supports nested accordions (1 level, more is madness)
* Adds a class 'active' to any active (opened) item
* Now supports panels that can contain anything
There is no cookie stuff. Please control state through your page (generation) code by adding the expand class to items that need to be expanded t page load time.
If this plugin is useful for you feel free to download it and use it on your website.
This plugin is discussed on my blog in this post.
december 2010 by buda
Easy CSS font-size pixel to EM conversion trick
november 2010 by buda
Here is a little CSS font-size trick might be new or old to you. I have seen this in a few other places, but thought it would be worth mentioning since it was relatively new to a few guys here in the office. I am not going to get into the differences of Pixels and EMs, maybe another post, but I am going to touch on them during this little trick. If you love to work in EMs and have all the conversions worked out in your head, great! If not and you would like to stick to pixels this trick might help you with the conversion, I am not trying to convince anyone to go either way.
css
easy
em
pixel
conversion
november 2010 by buda
Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time – DesignM.ag
blog code css design framework frameworks development productivity layout html free links programming resources web toread tools themes theme templates web2.0 template webdesign webdev webdevelopment wordpress
april 2010 by buda
blog code css design framework frameworks development productivity layout html free links programming resources web toread tools themes theme templates web2.0 template webdesign webdev webdevelopment wordpress
april 2010 by buda
related tags
Accesibilidad ⊕ accessibility ⊕ accordion ⊕ add-ons ⊕ addon ⊕ advanced ⊕ ajax ⊕ alert ⊕ animation ⊕ apple ⊕ apps ⊕ art ⊕ article ⊕ Barra_de_marcadores ⊕ begginers ⊕ bestpractices ⊕ blog ⊕ blogging ⊕ blogs ⊕ border ⊕ botones ⊕ box ⊕ breadcrumb ⊕ breadcrumbs ⊕ browser ⊕ browsers ⊕ bugs ⊕ button ⊕ buttons ⊕ carousel ⊕ center ⊕ centering ⊕ cheatsheet ⊕ checklist ⊕ cleanup ⊕ clear ⊕ clue ⊕ cluetip ⊕ cms ⊕ coda ⊕ code ⊕ collection ⊕ color ⊕ colors ⊕ columns ⊕ comment ⊕ comments ⊕ community ⊕ compass ⊕ condition ⊕ conditional ⊕ conversion ⊕ cool ⊕ corners ⊕ cross ⊕ css ⊖ css3 ⊕ customfields ⊕ customize ⊕ cycle ⊕ design ⊕ developers ⊕ development ⊕ display ⊕ drop ⊕ easing ⊕ easy ⊕ ecommerce ⊕ edit ⊕ editor ⊕ effect ⊕ effects ⊕ em ⊕ email ⊕ enhancement ⊕ espresso ⊕ explorer ⊕ extension ⊕ extensions ⊕ firefox ⊕ fix ⊕ fixed ⊕ float ⊕ floating ⊕ font ⊕ fonts ⊕ fontstack ⊕ form ⊕ formatter ⊕ forms ⊕ framework ⊕ frameworks ⊕ free ⊕ freeware ⊕ frontend ⊕ gallery ⊕ generator ⊕ google ⊕ graphics ⊕ grid ⊕ grids ⊕ guide ⊕ hack ⊕ hacks ⊕ help ⊕ herramientas ⊕ highlight ⊕ hover ⊕ how ⊕ howto ⊕ html ⊕ html5 ⊕ ie ⊕ ie6 ⊕ image ⊕ images ⊕ img ⊕ important ⊕ imported ⊕ inspector ⊕ inspiration ⊕ internet ⊕ ipad ⊕ iphone ⊕ java ⊕ javascript ⊕ jquery ⊕ js ⊕ layout ⊕ less ⊕ lightbox ⊕ links ⊕ list ⊕ lists ⊕ mac ⊕ mail ⊕ malo ⊕ maps ⊕ media ⊕ menu ⊕ menus ⊕ minify ⊕ minimal ⊕ mobile ⊕ modal ⊕ multi-column ⊕ navigation ⊕ new ⊕ newsletter ⊕ newsletters ⊕ object ⊕ opensource ⊕ optimization ⊕ optimize ⊕ osx ⊕ page ⊕ patterns ⊕ performance ⊕ photoshop ⊕ php ⊕ pixel ⊕ planning ⊕ plugin ⊕ plugins ⊕ png ⊕ pngfix ⊕ pop ⊕ popover ⊕ popup ⊕ productivity ⊕ programming ⊕ progressive ⊕ queries ⊕ redundancy ⊕ reference ⊕ regexp ⊕ resolution ⊕ resources ⊕ responsibe ⊕ responsive ⊕ retina ⊕ rgba ⊕ round ⊕ rounded ⊕ roundedcorners ⊕ ruby ⊕ safari ⊕ sandbox ⊕ sass ⊕ scripts ⊕ scroll ⊕ scss ⊕ seestyle ⊕ seo ⊕ shadow ⊕ signature ⊕ simple ⊕ size ⊕ slide ⊕ slider ⊕ slideshow ⊕ snippets ⊕ social ⊕ software ⊕ solution ⊕ sprite ⊕ sprites ⊕ standards ⊕ style ⊕ styleswitcher ⊕ sugar ⊕ support ⊕ switch ⊕ syntax ⊕ tablet ⊕ target ⊕ template ⊕ templates ⊕ test ⊕ testing ⊕ texteditor ⊕ thematic ⊕ theme ⊕ themes ⊕ tip ⊕ tips ⊕ to ⊕ tool ⊕ tools ⊕ tooltip ⊕ toread ⊕ transparency ⊕ trick ⊕ tricks ⊕ trics ⊕ tutorial ⊕ tutorials ⊕ type ⊕ typeface ⊕ typography ⊕ ui ⊕ usability ⊕ useful ⊕ usefull ⊕ Utiles ⊕ Utilidades ⊕ validation ⊕ vertical ⊕ via:zite ⊕ web ⊕ web2.0 ⊕ webdesign ⊕ webdev ⊕ webdevelopment ⊕ websites ⊕ webstandards ⊕ widgets ⊕ window ⊕ windows ⊕ wordpress ⊕ wordpress-plugins ⊕ wordpress-theme ⊕ wordpress-themes ⊕ wp ⊕ wp-plugins ⊕ xhtml ⊕ zoom ⊕Copy this bookmark: