WebStockBox » Css

Sample CSS3 Code For Creating Cool CSS3 Stuffs – CSS3 Click Chart

Tom — Mon, 19 Dec 2011 19:48:24 +0000

CSS3 is cool and it can be use to create many cool web stuffs. CSS3 Click Chart will show you the chart of what CSS3 can do, what are the browsers that supported and you will get the sample CSS3 code for…

Box Sizing, Border Radius, Text Shadow, Box Shadow, Multiple Columns, RGBA Colors, HSLA Colors, Multiple BG, Opacity, Linear Gradients, Radial Gradients, @font-face, Rotation, Scale, Transitions, Border Images, Text Select Color, Outline Offset, Resizing, Word Wrap, Background Size, Keyframe Animations, Text Stroke and Reflections.

You just simply click on each element on the chart, you’ll get the sample code, description and the list of what’re browsers that supported the style.

Link : CSS3 Click Chart

XHTML and CSS Video Tutorials For Beginners

Tom — Sat, 17 Dec 2011 16:18:17 +0000

So, you want to create a website? This is a playlist that I found on Youtube on the topic “XHTML and CSS Video Tutorials”. The videos teach you from beginner level to intermediate level. These are good XHTML and CSS Video Tutorials, take some time to learn.

XHTML and CSS Tutorial – 2 – Creating our First Webpage

Link : Watch More on Youtube.

20 Cool CSS3 Text Effects + Tutorials

Tom — Sat, 19 Nov 2011 23:28:04 +0000

CSS3 is a powerful language and it helps web designers build beautiful website easier. Creating text effect with CSS3 is nice and easy, this is a list of 20 cool CSS3 Text Effects and tutorials that you can grab the code to create cool CSS3 text for your sites.

I found these effects look really nice and you can see some of these effects widely use on the web. Some of the effects in the list are not CSS such as sIFR and FLIR but I think it’s good to have them on the list.

1. 3D Text

2. Letterpress Text Effect Using Photoshop and CSS

3. Neon Lights

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

5. How to Create a Cool Anaglyphic Text Effect with CSS

6. Adding An Outline To Your Text Using the CSS3 text-stroke Property

7. CSS Gradient Text Effect

8. Matrix Animation with WebKit CSS3

9. How to Create Inset Typography with CSS3

10. Quick Tip: Nonintrusive CSS Text Gradients (Video tutorial)

11. The Easiest Way to Create Vertical Text with CSS

12. 8 CSS3 Text Shadow Effects

13. Text Rotation With CSS

14. Add Grunge Effect to Text Using Simple CSS

15. 3D Text Tower

16. Adding Stroke to Web Text

17. How To Implement sIFR3 Into Your Website

18. How To Use Any Font You Wish With FLIR

19. Text Shadow Box

20. CSS3 Shining Text, CSS2 Flaming Text

21. Let’s Create Paper with CSS

Generate CSS Loading Indicator Online

Tom — Tue, 15 Nov 2011 01:02:37 +0000

You may have seen the loading indicator in many sites these day. If you want to have it on your site and you don’t know how to create one you can go to CSSload.net and create one for you own.

CSSload is an online tool, easy to use and it work great, currently, this tool offers 8 styles of loading indicator using pure CSS3 code.

Link : CSSload.net

SimpLESS – Coding CSS in LESS Way

Tom — Sat, 12 Nov 2011 23:31:31 +0000

Less is a new way to code CSS. Less is the dynamic stylesheet language that getting more and more popular among the web coders. If you’re looking for a better way to code CSS you can check it out at lessees.org

SimpleLess is a tool that help you generate CSS file. Whether you’re a designer or a hardcore programmer, SimpLESS is perfect for you. It compiles your *.less files into valid CSS.

SimpLESS is available for free download in all major platform, Windows, Mac and Linux.

Link : SimpLESS

Free CSS Reference App for iPhone or Android Phone

Tom — Sat, 16 Jul 2011 19:48:18 +0000

Cool app for CSS developers who use iPhone or Android phone. If you’re new to CSS or you code CSS for long time but you need a good CSS reference, you should have this app on you phone.

CSS reference is an app that shows you about CSS properties, including syntax, examples and browser limitations. A reference for CSS properties and selectors including syntax, examples and limitations for CSS1 and CSS2 properties. Includes visual examples for border-style, cursor, font-style, font-variant, font-weight, text-decoration and text-transform properties.

CSS reference is available free on the App store and Android market.

Link : More Info & Download

Creating CSS3 Buttons With Little Icons

Tom — Fri, 15 Jul 2011 18:49:51 +0000

I just found a nice tutorial on how to create a CSS3 button with a little icon. The button look really great, I think you should bookmark, maybe you can use it in your web design project.

Link : Creating CSS3 Buttons With Little Icons

Less – A Handy Tool For Coding CSS

Tom — Tue, 14 Jun 2011 15:51:22 +0000

This is a handy tool for coding CSS. This tool save your time when coding CSS. If you’re a web designer using a Mac and you code CSS you should check out this tool. I don’t know how to describe how this tool works, there’s a video on their site, hit the link below for more info.

Link : More info on Less

Create a Nice HTC Style Clock Widget With CSS3

Tom — Thu, 09 Jun 2011 22:08:57 +0000

Learn to create a nice HTC Style Clock Widget With CSS3.

Link : View the tutorial
Demo

A Cool Collection CSS3 Buttons – Ubuwaits

Tom — Fri, 03 Jun 2011 11:02:05 +0000

If you’re looking for a nice collection of buttons for your web design project, here is a nice one that I found.

This is a collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button.

Link : Ubuwaits CSS3 buttons

Creating CSS Ribbon With CSS 3D Ribbon Generator

Tom — Tue, 05 Apr 2011 19:44:13 +0000

3D Ribbon Generator is a tool for generating CSS code to create a 3D Ribbon fast and easy. This tool is a really useful tool for me, I can create beautiful ribbons for my blogs in easy way.

You may see that many blogs use ribbon to decorate in their theme and I think it looks great. If you want to create your own, here is the easy tool that I found.

3D Ribbon Generator is compatible with all major web browsers. You can started creating ribbon by select the template you want, then adjust font, color and size as you want and this tool will generate the CSS code for you.

Link : 3D Ribbon Generator

Generate CSS3 Button With CSS3 Button Maker

Tom — Mon, 04 Apr 2011 00:13:18 +0000

Fast and easy to use tool for creating a nice CSS3 button. This tool is CSS3 Button Maker which created by css-tricks.com. I really like this tool cause I like this style of button, it’s look good.

This tool is easy to use, you just select color, font, button size, text color, hover color and a little bit adjustment, you will get a nice CSS3 button. You click on “View the CSS” button to generate CSS code to put on your site.

And better than that the creator of this tool give away source code for free. You can make it better or run it on your own website.

Link : CSS3 Button Maker

CSS3 Video Tutorial – Creating Text Shadow

Tom — Wed, 12 Jan 2011 16:35:41 +0000

Nice video tutorial on how to create a text shadow effect using CSS3.

Create Polaroid Photo With CSS3

Tom — Thu, 11 Nov 2010 03:19:23 +0000

View The Tutorial
View Demo

Free Download CSS3 Buttons

Tom — Sun, 07 Nov 2010 01:44:20 +0000

Free Download Css3 Button

Link : CSS3 buttons

Format CSS Code Online To Make It Easy To Read

Tom — Mon, 27 Sep 2010 23:57:34 +0000

If you’re a web coder sometime your code looks mess. This tool is a tool that help you format your CSS code to make it tidy and easy to read.

ProCSSor is a powerful CSS prettifier that lets you format CSS in the exact way you want. With the beautiful interface and easy to use.

Link : http://procssor.com/

Creating CSS Fold Effect (Video Tutorial)

Tom — Sat, 25 Sep 2010 17:00:16 +0000

A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily.

Link : Practical CSS Shapes

CSS3 Menu – Free CSS3 Menu Creator

Tom — Fri, 24 Sep 2010 23:45:38 +0000

CSS3 Menu is a tool that help you create a CSS3 menu with simple and easy. You just point, click and generate CSS3 code for using in your web page.

You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. CSS3 shadow (box-shadow and text-shadow). Opacity, backround and font colors, linear gradient and radial CSS3 gradient are also supported.

If you’re designing website or blog, this tool is really useful and worth downloading. CSS3 Menu is a free software that available for both Windows and Mac OSX

Link : More Info & Download

Creating Persistent Menu bar With CSS3 and jQuery

Tom — Wed, 22 Sep 2010 08:41:29 +0000

Dow you want to have a nice Persistent Menu bar on your site?

You may see it on some site, but if you have no idea what it is? you can hit the link below for the demo. 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.

RocketBar is a Persistent Menu bar which was written using CSS3 and jQuery and I found it really good. The guy at addyosmani.com made a tutorial on how to create a persistent menu bar which he called it “RocketBar”.

Hit the link below for demo or the tutorial.

BonBon Button – Beautiful and Nice CSS3 Button

Tom — Sat, 18 Sep 2010 01:41:18 +0000

BonBon buttons are buttons that use CSS3 technique to create nice and sweet buttons. CSS3 is very cool and these buttons are nice too. I really like it.

You can use the button for your web design or if you don’t like the button, I think the file still worth download because the techniques that used for creating the buttons are really nice, you can learn some useful techniques from the source code.

Hit the link below to download the file for free.

BonBon Button
Download

Generate CSS Grid Layout Online

Tom — Mon, 28 Jun 2010 19:45:14 +0000

Nice online tool for generating CSS grid layout

The 1KB CSS Grid

Grid"/>

Tiny Fluid Grid

Create a Web Layout With Blueprint CSS Framework (Video Tutorial)

Tom — Mon, 28 Jun 2010 19:26:53 +0000

Blueprint CSS framework is well known CSS framework and very popular among the CSS designer, but if you’re a newbie to CSS framework this simple video tutorial can guide you on how to use Blueprint to create a CSS web Layout.

CSSDESK – Code Your CSS and See the Live Preview

Tom — Sun, 13 Jun 2010 01:11:13 +0000

CSSDESK is a nice online tool for coding HTML and CSS. This tool is different from another online coding tool is you’ll see the live preview at the live preview and you can share the live link to your friend.

I really like this tool, I use it for preview codes that I grab from the internet to see if it can work properly.

This tool is easy to use and it’s a free service. I think, this tool will useful for me if I have an iPad.

Link : CSSDesk

Basic CSS : What is CSS Reset?

Tom — Fri, 11 Jun 2010 23:13:55 +0000

What is CSS Reset, find out the answer in the slide.

Link : CSS Reset

Free HTML5 Cheat Sheet

Tom — Sun, 06 Jun 2010 21:47:05 +0000

Prepare yourself for HTML5 and CSS3, free download cheat sheet.

Creating CSS Box Shadow (Video Tutorial)

Tom — Thu, 03 Jun 2010 11:17:46 +0000

This one is a good CSS3 technique and I really like this CSS technique, It’s useful and I can use this CSS box shadow on my new web design.

It’s a nice video tutorial on how to use CSS3 to create a nice CSS box with inner shadow.

This is a five minute video that will teach you some advanced CSS3 Box Shadow techniques. The tutorial is nice and the video is in high quality.

Link : View the tutorial

Create a Beautiful CSS Polaroid Photo with Drop Shadow (Tutorial)

Tom — Tue, 01 Jun 2010 09:39:15 +0000

CSS is very powerful and now become a web standard.

In this tutorial will show you a nice way to create CSS polaroid photo gallery with drop shadow using pure CSS and you’ll get an extremely nice image gallery.

This tutorial uses some CSS3 properties, so IE users won’t see the complete effect, but fully supporting browsers such as Firefox and Safari will be treated to the whole experience.

You’ll learn how to style up your image to polaroid style, add some drop shadow and learn how to rotate your images.

View the tutorial
View Demo

Design & Build a Grid Based Web Design with CSS (Tutorial)

Tom — Tue, 01 Jun 2010 08:55:21 +0000

Grid system is really useful for web design. If you’re looking for a nice tutorial on how to design a website using grid, here is the good one.

This tutorial is from LINE25, they show you a process of designing web layout using grid base. You’ll learn from design your web layout using Adobe Photoshop, through to writing the HTML structure, styling up with CSS then adding clever functionality with the jQuery library.

View the tutorial
View Demo

Creating a Floating Menu bar Tutorial

Tom — Sun, 30 May 2010 22:59:20 +0000

I found some sites using this technique on their sites. As you can see from the image, it’s a useful toolbar or menu bar that you can add a quick launch menu or social networking icons for your user easily sharing your contents.

In the tutorial, you’ll learn to create you own floating menu bar using CSS, jQuery

Link : View the Tutorial
View Demo

Beginner Guide to Design and Code a Flexible Website

Tom — Wed, 26 May 2010 18:04:31 +0000

New to web design? If yes this is the right tutorial for you.

In this tutorial, we’re going to be designing and coding a simple blog-style web-page. We’ll pay special attention to making our design flexible and accessible by using clean and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs.

Link : View the tutorial

20 Awesome jQuery Enhanced CSS Button Techniques

Tom — Wed, 26 May 2010 17:42:18 +0000

With all the talk of CSS3 at the moment, its easy to overlook the impact Javascript, especially jQuery, can have on the appearance of the basic web button. As such, we have collected 20 useful CSS buttons techniques that have all been improved and enhanced by the sooper-dooper power of jQuery.

Link : Read More…

Creating Rocking and Rolling Rounded Menu with jQuery

Tom — Fri, 07 May 2010 18:21:32 +0000

In this tutorial, you’ll learn how to create a very nice effect menu created by using CSS and jQuery. The menu look really great and you can use in your web design project. You can view the Demo here.

Link : View the tutorial
View Demo

Online CSS3 Generator

Tom — Tue, 20 Apr 2010 00:06:25 +0000

Nice tool for fast coding CSS3 that you should bookmark. CSS3 Generator is an online that will help you generate CSS3 code fast and easy. You just simply select one of these tool from the list (border radius, box shadow, text shadow, RGBA, @font face, multiple column, box resize, box sizing, outline, selectors and gradients)

This tool will generate the ready to use CSS code for you and also shows a list of supported browsers.

Link : css3generator.com

CSS Shorthand (Video Tutorial)

Tom — Fri, 16 Apr 2010 00:24:05 +0000

Learn nice techniques on how to write short CSS code

Link : View the tutorial

Create YouTube-like Adaptable View Using CSS and jQuery

Tom — Tue, 23 Feb 2010 03:38:01 +0000

Create YouTube-like Adaptable View Using CSS and jQuery. I see this technique on Youtube, It give you ability to switch between normal and wide mode and thus expand/shrink movie area. If you’re looking for a tutorial on how to do that, you can visit the link below to the full tutorial.

Link : Create YouTube-like Adaptable View Using CSS and jQuery
View Demo

Creating Apple Syle Slideshow Gallery (Tutorial)

Tom — Mon, 22 Feb 2010 15:58:42 +0000

This is a good tutorial on how to create a nice and beautiful slideshow that similar to slideshow gallery that use on Apple.com to showcase their products.

You’ll learn from the code to create your own slideshow with the power of CSS and jQuery.

Link : View the tutorial
View Demo

ArduoCss Freeware CSS Editor

Tom — Wed, 27 Jan 2010 15:33:53 +0000

ArduoCSS is a Css editor with an intuitive and easy-to-use interface. With it simple interface you can edit or build a css file. This can be done with the classic text editor with syntax higlight or with the user friendly managed interface.
In every moment you can test your work in an test page with all html elements, shown in the preview area. Don’t worry If you need to test the css in a particular page, because ArduoCss can show the stylesheet in external html pages.

Feature list

edit css files through visual interface
edit css through text editor with syntax higligth
allow css compression to optimise site performance
allow preview in external css files
allow to edit css property througth dialogs
show preview of the editing file

Link : ArduoCss Freeware CSS Editor

Drawter – Create CSS Web Template by Just Drag Your Mouse

Tom — Sat, 09 Jan 2010 00:32:34 +0000

I just found this tool and really like it, this tool is for generate CSS web template online. You just simply draw a box on the canvas, then click on the menu Code –> generate code and you get the code.

Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

This tool also gives you options to adjust language, page title, font, color, backgroud, border, box style and more.

Currently Drawter is available in Pro version, which means that it is intended for webmasters use only – knowledge of HTML and CSS is required.

Link : drawter.com

Design Web Layout with Photoshop and Convert to WordPress Theme (Video Tutorial)

Tom — Mon, 14 Dec 2009 04:14:02 +0000

And again… good video tutorials from Css-Tricks, This is a very useful tutorial series, one tutorial you’ll learn three things in web development progress. The three steps as I mentioned are about design and convert your design to web code and then template.

You’ll learn from this tutorial on how to create a web layout using Photoshop, convert to XHTML/CSS and then convert your files to WordPress theme.

I really like these tutorials even I knew how to design web layout using Photoshop and convert it to WordPress theme, some techniques are useful to me.

The tutorials are in three parts and you can download the video too.

Part 1: Photoshop Mockup (59:50 min)
Part 2: HTML/CSS Conversion (01:11:10 min)
Part 3: WordPress Theme (50:59 min)

Clean Your CSS Code with Dust-Me Selectors

Tom — Fri, 11 Dec 2009 09:20:34 +0000

This is another useful firefox plugin for web developers. Dust-Me Selectors is a Firefox extension that finds unused CSS selectors in your code.

It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.

You can test pages individually, or spider an entire site, and you’ll end up with a profile of which selectors are not used anywhere. This is a free plugin, download and try it by yourself.

More Info & Download

Clean You CSS Code with Dust-Me Selectors" />

Create a Web Page Using Div and CSS with Dreamweaver (Video Tutorial)

Tom — Tue, 17 Nov 2009 18:20:12 +0000

If you want to learn how to use Div tag to create a web, this video tutorial will guide you to create a web page using Div tag and CSS to style the Div box with Adobe Dreamweaver.

Watch on Youtube (HD available)

11 Classic CSS Techniques Made Simple with CSS3

Tom — Thu, 05 Nov 2009 22:45:30 +0000

Want to learn CSS? all these tutorials from Nettuts are good. they show the code for CSS 2 and CSS 3. You’ll learn how to code…

Rounded Corners
Box Shadow
Text Shadow
Fancy Font
Opacity
RGBA
Background Size
Multiple Backgrounds
Columns
Border Image
Animations

Link : 11 Classic CSS Techniques Made Simple with CSS3

Create CSS Rollover Menu With Sprite Technique (Video tutorial)

Tom — Sat, 31 Oct 2009 23:31:57 +0000

CSS Sprite technique is one of the most famous CSS technique for creating CSS rollover menu. This technique is not requirere to preload image like the usual javascript menu. The video tutorial is great explain.

View Demo | Download Source Code

Link : Exactly How to Use CSS Sprites

50 Cool CSS Menus, Free Source Codes + Tutorials

Tom — Thu, 29 Oct 2009 19:26:14 +0000

Tom — Mon, 26 Oct 2009 18:30:17 +0000

This list is a collection of online tools for compressing your CSS code. If you want to make your site load faster a bit or you want to save bandwidth to reduce server load, these are the tool that you’re looking for.

I’ve tried these tools and it works great, CSS compressor can reduce my CSS file 30.61% (File size before optimization: 12.35 KB, after optimization : 8.57 KB .

You may think 3-4 KB is not much, but load faster is always good.

1. CSS Optimizer

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

2. CSS Drive – CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

3. Icey CSS Compressor

Icey CSS Compressor is one of a good CSS compressor tool.

4. CSS Compressor

Use this Cascading Style Sheets, CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

5. Clean CSS

Simple interface, but powerful tool for compress your CSS code

6. Arantius CSS Compressor

This tool was inspired by a similar one at Dark Rift Studios. This is, though, written in javascript so it’s all client side (no transmitting your CSS to someone elses’ server), and it has a few more capabilities, plus configurable options. It basically takes out comments and whitespace from a CSS file, which can save more space than you might imagine.

7. CSSTidy

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).

8. CSS Redundancy Checker

Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant.

9. Online Css Compressor

Another Online CSS Compressor

10. W3C CSS Validator

This tool is very important, it’s not a compressor tool, but you have to check errors on your CSS code.

Easily Create CSS Web Layout with CSS Grid Editor (Free Download)

Tom — Fri, 23 Oct 2009 16:17:32 +0000

I just found this tool and I think it’s a useful tool for all web designer. Boks helps you generate CSS web layout fast and easy.

Boks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS’s framework. It’s been designed for those who think the Grid System is good but never really took the time to give it love.

It handles grid configuration, baseline rhythm pimpin’, CSS (with or without compression) and grid.png export, HTML layout and much more goodie-goodie!

This tool is a free download and If you have no idea how this tool work, they also provide video tutorials too.

Setting up your grid

Building a layout

Link : More Info and Download
Link : More Video Tutorials

CSS Tutorials For Beginners

Tom — Wed, 07 Oct 2009 20:35:21 +0000

Comprehensive CSS tutorial for all beginners or even you’re already have some basic of CSS. Smashing Magazine post a new article on their site “Mastering CSS Coding: Getting Started” very awesome, if you want to learn to code web using CSS.

I think, it’s a really good list of tutorial from basic CSS to advance CSS techniques. You’ll learn some basic CSS from padding, margin, float and alignment to how to convert your design in Photoshop to HTML and CSS.

Link : CSS Tutorials For Beginners

Creating CSS Tabbed Box

Tom — Sun, 04 Oct 2009 19:44:26 +0000

I always like the jQuery effects that use for web navigation, box, slide tab, image viewer and many more. This one is a good CSS + jQuery effect that use for tabbed box that I found this on jcargoo.org

If you’re looking for a good CSS tabbed box, this is a good one, and on their website, I found the other cool CSS + jQuery effect that you may like it, such as “Easy Tooltip and Image Preview Using jQuery”, “Star Rating System with CSS and jQuery”, “7 Vertical Menus With jQuery Effects”, “Submit Button Enabling With jQuery” and more.

You can learn to create the tabbed box from their sample code or just copy and paste to create your own tabbed box. Visit the links below for demo and the tutorial

Link :
View Demo
View the tutorial

Free CSS Speech Bubbles Code

Tom — Tue, 29 Sep 2009 18:35:24 +0000

This is a good design CSS speech bubbles that you can download and use it on your web design project for free. These bubbles are available in 3 styles and tested in all major web browsers.

Download
Link : Free CSS Speech Bubbles Code

30 CSS Best Practices for Beginners

Tom — Thu, 17 Sep 2009 23:10:59 +0000

Nettuts+ post a new article “30 CSS Best Practices for Beginners” It’s is a list of 30 CSS techniques+tips and tricks. They claimed this for beginners, but I think this good for all of CSS coder even you’re not new to CSS.

Link : 30 CSS Best Practices for Beginners