Posts In "CSS"

10 Resources For Modern/Metro UI Web Design

December 12th, 2012 by aditia rahman / 2 Comments  

     

Metro UI

Metro UI or Modern UI are latest microsoft interface design interface term, it applied in windows 8 and windwos phone ui, with big and colorful square box minimalist icon theme. This term are influencing some of web design trend too, you can see some of sites adapting metro ui style, and these post have some resources for web designers to creating metro style ui in web design, for component (buttons, menus, navigation, fonts, icons, etc).

13 CSS Responsive Menu Tutorial

October 11th, 2012 by aditia rahman / No Comments  

     

Today responsive web design are becoming a trend, responsive web design are a solution for web developer for dealing with multiple devices resolution, In this post I share some tutorial to help you understand in creating responsive menu using CSS.

Responsive Menu with CSS3 Tutorial

Responsive Menu with CSS3 Tutorial

Jquery CSS Animated Menu

October 8th, 2012 by aditia rahman / No Comments  

     

Few days ago I try to create a simple navigation menu with a css rotating animation, using css animation and features sure it possible to do this, but in this case I want the animation applied when mouse over event are triggered.

The problem using css hover menu is when mouse hover triggered, the element are starting to rotate even if the mouse hover on the corner of the element, and the animation suddenly stop cause the element already leave the mouse cursor.

15 More Twitter Bootstrap Resources

August 25th, 2012 by aditia rahman / 1 Comment  

     

Twitter Bootstrap now gaining popularity in web development area, because it providing many common usable user interface component, combining with nice simple themes, css framework and javascript element.

bootstrap

Many tutorial and resources has been developed to help us getting familiar with bootstrap, in today post I post some more bootstrap resouces that might be useful, I say it “more” cause there are the same article showing bootstrap resources and tools (posted on the bottom of this post), well at least these haven’t been listed before.

[Opinion] Why Using CSS Framework on Developing Web User Interface

August 21st, 2012 by aditia rahman / No Comments  

     

Remember few years ago before HTML5 and CSS3 came along, when the tableless css design are a very popular, I always busy with css float and div property, when designing a layout. Another thing to do are making a standard web user interface element, like using one nice theme, so that’s why javascript framework like jqueryui, dojotoolkit and extjs born.

css framework thumb

When the grow of mobile web users are increasing, a web designer becoming more and more busy to make a mobile web version of his sites, this make another moment for some companies or community to create a javascript framework for mobile web, including jquerymobile, dojomobile, and sencha touch.

Create To Do List Web Form

August 17th, 2012 by aditia rahman / No Comments  

     

In today post I want to share a little code snippet for creating a simple to do list web form, I created this after found a notepad css design in psd on dribble, means recreating it in html form. Nothing much to add just simple to do list form using css only, and a little jquery for check uncheck event.

todolist-thumb

21 Examples of CSS Progress Bar

July 30th, 2012 by aditia rahman / 2 Comments  

     

A progress bar is a common compent in web design, with a lot of new capability of CSS3, now it really possible to create a progress bar using CSS only even is html5 there is a html5 features dedicated to progress bar, you can search on google “Cross Browser HTML5 Progress Bars”, but in today post I gathered some example progress bar using CSS some with animation, it might be good to reduce images usage in your websites.

Simple Table Pricing Using CSS

June 18th, 2012 by aditia rahman / 1 Comment  

     

In today post I want to create a simple table pricing using CSS only style, table pricing is one of the most common use in web design especially for web sites who offering different kind of product or service, for example we can found it on web hosting sites, commercial software support, online marketing consultant, etc.

css-table-pricing

In this example I use a sample dummy web hosting datam, for grid I use notjustgrid, to make easier dividing a div, and colorzilla gradient editor to creating a button gradient color. The other features and tool used in this example are google web fonts, css text shadow, rounded corner and box gradient.

JQuery CSS Animation and Rotate

December 11th, 2011 by aditia rahman / No Comments  

     

In today post I try to do a little experiment with css animation, with jquery to generating css value on the fly. When this post created the this animation examples only works on firefox and chrome browser.

In this short example I try to create a stack of images, on the default position each of images have a different angle, and rotating to the same angle in the same duration of time. Here I show all of the code.

20 CSS Button Examples and Tutorials Resource

December 8th, 2011 by aditia rahman / 4 Comments  

     

CSS button has becoming one of web design trend these day, with some cool features in CSS 3 like rounded corner, gradient background, box shadow, text shadow we can create a fancy web button without using any images.

css button

Today I compiled some of awesome CSS button example and tutorial, I tried to show the most recent example and tutorial, at least created on this year. Here they are, might useful for you to learn about creating a fancy CSS button or you may found something that ready to use, and you can copy and paste to your next project.