Home / css3
Showing posts with label css3. Show all posts
Showing posts with label css3. Show all posts

10 CSS Tools & Generators For Developer & Designer

CSS Tools & Generators For Developer & Designer - Writing CSS codes from the scratch is really a tiresome and time-consuming task that can freak out a CSS coder. Now, here we are going to share some useful CSS tools that can help you to save your time and effort to a great extent.

Spritebox

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use !





Online CSS-Reset Tool

There are many CSS Resets available, including everything from very basic resets to comprehensive resets consisting of many styles. There isn’t a “best” CSS Reset for all designs, only a best CSS Reset for your design. To help you find the perfect CSS-reset styles, CSSresetr lets you try all the best CSS Resets on a variety of web pages – even your own.





CSS Layout Generator

The generator helps you create the structure of your website template using valid HTML and CSS.You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.





Tiny Fluid Grid

The happy & awesome way to build fluid grid based websites.





CSS Validation Service

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.





ProCSSor

Advanced CSS Prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.





CSS3 Please

The tool offers support for border-radius, box-shadow, linear-gradients, rotation, rgba colors and @font-face, with work underway on support for skew and scale. In some circumstances the tool also offers support for Internet Explorer using IE filters to replicate the same effects as achieved by CSS3 properties.





Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla





SlickMap CSS

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.





CSSDesk

CSSDesk is a online HTML/CSS sandbox. Experiment with CSS, see the results live, and share your code with others.



CSS3 & HTML5 : 11 Fresh Tutorials

CSS3 & HTML5 : 11 Fresh Tutorials - With the inevitable, exponential rise in popularity of both HTML 5 and CSS3, designers can look forward to many new and exciting possibilities for their web pages, applications, and scripts. Combined, these two emerging languages provide designers with immense power over the structure and presentation of their web documents.

How to Create Social Media Buttons Using CSS3

CSS3 is truly amazing. It gives web designers the ability to create flexible and easily reusable design elements, and reduces our reliance on images and graphics editors. This is a guide shows you how to create stylish social media buttons using CSS3, HTML, and some freely available social media icons.





Code a Vibrant Professional Web Design with HTML5/CSS3

We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.





Designing Search Boxes with HTML5 and CSS3

A hands-on tutorial demonstrating a few practical techniques for designing cross-browser, standards-compliant functional Search Forms with HTML5 and CSS3 (and a little bit of jQuery).





An Introduction to CSS 3-D Transforms

The CSS 3D Transforms module has been out in the wild for over a year now. Currently, only Safari supports the specification – which includes Safari on Mac OS X and Mobile Safari on iOS.





How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.





Create Spinning Rays with CSS3 Animations & JavaScript

Subtlety is the key to using this effect...effectively. Using CSS properties to transition the element's rotation is even more optimal, seeing as they're native to the browser.





The CSS3 Resize Property

The resize property allows a developer to define whether or not a UI element can be resized manually by the user.





Happy Holidays with CSS3

New year is coming and I want to wish all of you Happy Holidays. For this reason, I made a little CSS3 experiment (with absolutely no images) and I hope you’ll enjoy it.





Creating 3D Buttons with CSS & jQuery

We're going to look at how to create a 3D button using very basic CSS and jQuery. This 3D button will better reflect the interactive abilities of many sites.





How to Create A Multi-Step Signup Form With CSS3 and jQuery

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.





Coding a Rotating Image Slideshow w/ CSS3 and jQuery

You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.



11 Fresh CSS3 Tutorials & Techniques

12 Striking CSS3 Typography Experiments

With the advent of CSS3, there are a variety of methods used to create interesting text effects allowing designers to exercise more creativity and produce more visually pleasing web pages. Browsers such as Safari and more recent versions of Firefox, Opera and Google chrome support the CSS3 properties used to change the appearance of text without having to create images.In this article we provide 12 Striking CSS3 Typography Experiments to get web designers started.

CSS Poster: Three Laws of Robotics

Another experiment in CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa, and maybe some more stuff.





CSS3 Tilt-Shift Text experiment

Where are the trees is an experiment trying to create a Tilt-Shift effect on Text using CSS3.





Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.





CSS3 glass text effect

ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3.





Stereoscopic 3D effect with CSS3





CSS typography experiment

This is a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS 2.1, and modern browser implementations of a couple of CSS3 properties.





CSS3 Trans­forms & @font-face Experiment





CSS3 Background-Clip & @Font-Face





Curtis CSS Typeface





CSS 3 Transform Experiment

Transform is a pretty exciting feature that’s been implemented in CSS 3. So why haven’t we used more of it in our designs?





Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications.





Flashlight

FLASHLIGHT is another CSS3 experiment. Again the text color is set to transparent and text-shadow is added. For the hover effect a rotateY transition is used with a low perspective.Works in Safari only. Booo!



20 CSS3 Button Tutorials & Resources

20 Awesome CSS3 Button Tutorials & Resources - The CSS3 buttons are fantastic, they are much easier than using image sprites !!

BonBonSweet CSS3 Buttons

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.





CSS3 Animated Bubble Buttons

With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names.





CSS3 Gradient Buttons

The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.





CSS3 Button Maker





Creating the Perfect CSS3 Buttons

The sweet looking buttons in this tutorial are created using only HTML and CSS3 – no JavaScript or images required!





CSS3 Buttons with Icons

We've all seen the CSS3 buttons, but none of them have icons in them. Turns out that background gradient uses the image property so we've got to add a span around the text to show in the icon.





css3menu

CSS3Menu is free for non-commercial use. If you want to use CSS3Menu on a school site, your non-commercial blog or non-profit organisation website, just download CSS3Menu and use it for free.





Realistic Looking CSS3 Buttons





Build Kick-Ass Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.





Emulating "Google-style" Buttons

This article features code examples in both Haml and HTML; Sass and CSS. If you are unfamiliar with Haml and Sass, please check out the Haml and Sass sites for more information and usage.





CSS3 buttons

This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possible markup. These buttons look best in Chrome and Safari (especially on OSX). They look almost as good in Firefox, with all other browsers falling back to a less-styled button. If you use these buttons in the wild, drop me a note and let me know.





How To Create a Stylish Content Slider using CSS3 & jQuery

We’ll learn how to create a stylish content slider using CSS3 and some jQuery magic.





Make CSS3 buttons that are extremely fancy

You can see that these buttons have a nice gloss, as well as some drop shadows for a nice 3D effect.





Sweet CSS3 buttons that you can't use... yet

CSS3 is coming, and with it you can create marvelous page effects which were previously only possible with images. And where CSS3 fails, you can use SVG, but that's another story.





Make Aristo's Buttons in CSS3





Beautiful Photoshop-like Buttons with CSS3

In this Tutorial we’ll show you how to recreate 3 different, slick buttons that we created beforehand in Photoshop without the usage of any image in CSS3. We’ll use a multitude of CSS3 properties, such as @font-face, text- and box-shadow, gradients and border-radius.





Fading Button Background Images With CSS3 Transitions

When Firefox 4 is released this October, browsers that support the CSS3 transition property will make up approximately 30% of the market (providing current Firefox users upgrade). With this in mind, it now becomes viable to consider CSS as an alternative to using JavaScript to achieve fading :hover{} effects on buttons and other interface elements. This article explores a simple method for doing this, with fallbacks for other browsers.





Getting to Work with CSS3 Power Tools

CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.





css3 button generator





Create an Advanced CSS3 Menu

Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. This is a tutorial explaining how to create great looking buttons using just CSS3.



Subscribe to: Posts (Atom)