Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘CSS3’

For years, it was images or JavaScript that usually helped us to create non-standard and attractive buttons.

With the getting-wider support for CSS3 features and stable resources that can CSS3-enable non-compatible browsers, there are no obstacles left for using CSS3 buttons.

Using CSS3 properties, there is a huge space of creativity for designing buttons; using border-radius for rounded corners, linear-gradient and box-shadow for creating depth, transitions for the animations and more.

Here is a list of 10+ nicely-coded and creative CSS3 buttons where you can use or get inspired. Also, you can find all other CSS3-buttons related resources that can help you to create better ones at the end of the article.

CSS3 Buttons With Simple Markup

CSS3 Buttons

A set of 18 buttons that are created with a simple markup as much as possible.

While 3 of them are WebKit-only, the other are compatible with all modern browsers.

GitHub-Style CSS3 Buttons

GitHub Style CSS3 Buttons

This is a simple CSS framework for creating GitHub-style buttons.

The buttons can have rounded corners and icons (a CSS sprite with a list of icons exist).

Read the rest of this entry »

320 and up is a CSS media queries boilerplate, a starting template for developing modern and responsive web pages, which follows a different approach then several other boilerplates.

As the starting point, it focuses on mobile and uses a tiny screen's stylesheet, so you won't have to load assets for desktop browsers.

320 and up

This tiny screen stylesheet contains only reset, color and typography styles. Media queries load assets + layout styles progressively and only as they’re needed.

320 and up contains 4 CSS3 media query increments: 480, 768, 992 + 1382px and there are 2 versions to choose from:

  • multiple linked stylesheets
  • single stylesheet with multiple media queries

The project can be used as an extension to HTML5 Boilerplate or as a standalone kit and it makes use of several well-known projects like Selectivizr, Respond.js and few others.

Few days ago, a post at WRD was sharing CSSPrefixer, a web-based tool which can analyze CSS files and auto-generate vendor-prefixes.

Here is a new option: prefixMyCSS, again a free tool which can re-format your CSS file by adding the vendor-prefixes for the CSS3 properties.

PrefixMyCSS

It can also remove any comments and generate the file within a single line for a smaller size.

On the other hand, it currently lacks of a command-line tool for a possible IDE-integration.

As we know, browsers like to keep creating their standards. In this case, it is the vendor prefixes for some CSS3 rules like: border-radius becoming webkit-border-radius for WebKit browsers, moz-border-radius for Gecko and so.

CSSPrefixer is a tool that saves us from creating rules for every browser by analyzing CSS files and generating the necessary vendor prefixes automatically.

CSS Prefixer

It can be used online freely or downloaded and ran from console (which makes integrating with IDEs possible) or as a Python script.

Also, the tool offers more like combining and minifying your stylesheets.

CSS3, besides the popular properties like border-radius or box-shadow, comes with many other new features like the Flexible Box Layout Module.

It helps creating equal-height columns, positioning them vertically or horizontally, aligning like any other element and usage in flexible sizes. Simply, stuff that we usually need to trick browsers in many ways.

On the other hand, as expected, it only works on WebKit and Gecko browsers.

Flexie.js

Flexie is a tiny JavaScript solution that uses Selectivizr's engine to traverse your style sheets and looks for display: box elements. In case that the property is not supported by the browser natively, it applies the fix to make the Flexible Box Model work as expected.

It supports most of the properties that come with the Flexible Layout Module including box-orient, box-align, box-direction and more.

The script is not perfect, has some compatibility issues that can be called as minor in most cases and a good step forward to using this handy CSS3 feature.

There are many websites where you can find documentation for the new properties CSS3 brings but  you'll probably love this the most.

css3files is an awesome website which guides users about CSS3 properties with a very friendly information and interface.

It explains every property in detail with visual guides pointing to "what every value is used for" and there are examples (with outputs).

The website also has a browser compatibility chart and a list of links to other good resource for each item.

css3files

CSS3 Generator is a free-to-use web-based application for styling an HTML element with CSS3 simply by playing with some settings.

The rules that can be changed includes border, border-radius, box-shadow, background gradient and opacity.

Almost each rule has optional and detailed settings like ability to define different border-radius values for each corner or selecting inset our outset shadow for box-shadow.

CSS3 Generator

The application instantly displays the output once any updates are made which is good for faster fine-tuning.

Once you feel satisfied with the result, CSS3 Generator creates the CSS code with detailed comments.

CSS3 enables us to transform HTML objects in several ways and rotation is one of them.

CSSWARP is a free-to-use web application that enables us to warp text with drag 'n' drops and get the HTML-CSS output.

CSSWARP

The text, curve type and font can be customized (fonts can also be selected from Google Fonts).

After the warp effect is created, the HTML-CSS to be used can be instantly generated.

P.S. It is also possible to include/exclude browser-specific CSS rules.

Not Just A Grid is a CSS framework that has styles for multi-column layouts, typography, forms, tables and user experience enhancement (pagination and alert boxes).

It is more focused on websites with larger widths in parallel to the trends and makes use of CSS3 for progressive enhancement + better user experience.

Not Just A Grid

The framework is modular as every part comes in separate stylesheets and the most important part of it; "layout" is only 1kb.

Also, the layout is not fluid. Rather, there are 4 hard-coded widths (960px, 100px, 1380px, 1500px) where all supports 1 to 6 column layouts.

It comes with demos for every module and it is very well documented.

3D ribbons are very popular objects that we see them being used to emphasize headers, create separate sections and more in many websites.

And, they don't have to designed as images. CSS3 is powerful enough to code many different types of ribbons.

CSS 3D Ribbon Generator

The web-based 3D ribbon generator makes creating them very easy by simply asking:

  • the type of the ribbon (4 ready-to-use ones)
  • colors
  • sizes

It also asks whether CSS3 box-shadow and shadow on contents should be added.

Once every option is selected, the application outputs the CSS rules (selector name can be pre-chosen).

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com