HTML5 + CSS3

CSS Based Tool Tips

Published On: 27/05/2014

A Tool Tip is a message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface. This message may consist of some text, image, hyperlink or may be some audio, video files.

A basic tool tip consist mainly of three parts: some text, a different color background with borders and a pointer pointing towards some text on the webpage to which this tool tip is linked. Before CSS3 was introduced, tool tips were designed and induced using some scripting in web pages. Since CSS3 can in existance, it has became quite easy to design a tool tip. Today I am sharing some very basic tool tips created using CSS3 and HTML only. Their is no use of JavaScript. To see more check out the demo file attached with this post.

     

CSS content and attr

Published On: 19/03/2014
CSS is becoming more powerful but on the other hand it also allows designers and developers to do some little things quite easily. Earlier, these things where used to be done by using some kind of scripts. In CSS3, their have been various features like transition, transform etc. under highlights, but one feature that came up as an underdog is generated content/ text.

Basic content Usage

The basic content property allows the designer or developer to dynamically set the content by using a pseudo element. Note that the position of this content remains relative.

     

Select Menu With Custom Dropdown

Published On: 09/03/2014

I have made something really interesting using which we can design stylish select bar without using any scripts and by only using CSS. Using some styling properties and attributes we can quite easily create a perfect select bar which will work perfectly on all the latest browsers.

Select BAR

Select Bar

Here in the above figure you can check out that the color of dropdown is different than color of text area in the select bar. This is all done using CSS Styling. The outline given to the complete select bar is of same color as the dropdown background. To give it more of a fresh feeling we have made it its edges round by using border-radius properties.

     

Star Rating With CSS

Published On: 08/02/2014

In the earlier post, I shared how to create Star Rating by using some scripting. In this post, we will create 5-Star rating without using any kind of scripting and also to mention this 5-star rating will work just fine as any other rating. This rating is created by just using some HTML and CSS. To make this rating work fine we have added some pseudo classes in CSS, to make it work fine. These pseudo classes allows to add style effects on hovering, on focussing and even when the stars are checked.

     

Fixed and Boxed Layouts

Published On: 05/01/2014

1. Fixed Layout.
2. Fluid Layout.

Many Designers prefer Fixed layout over any other layout because using this layout is easier and its quite easy to make web pages using Fixed layout. A fixed layout webpage is wrapped into fixed width. The width is fixed for all the browsers, hence there is no issue related to width. Also there in no need to define max-width and min-width using Link Tag attributes. But using Fixed layout, there is a need of Horizontal scroll bar while using small resolution devices and browsers. With this major issue, it is now days less in use. Hence now days Designers prefer Fluid layout over this Fixed Layout while designing Web pages.

Layouts

Layouts

     

Responsive Template

Published On: 05/10/2013

Now days web designing is not a simple task as compared to earlier days. Earlier website were only created for either Desktops and Mobile Devices. With the introduction of Smartphones in the market and other platforms like Android, their comes Responsive Websites. Responsive Websites are defined as follows:

A responsive website changes its appearance and layout based on the size of the screen the website is displayed on.

Responsive sites can be designed to make the text on the page larger and easier to read on smaller screens. They can also be configured to make the buttons on the phone’s screen easier to press. More sophisticated ways of using responsive design on a mobile device include: formatting the website to hide or present entirely different information, radically changing the graphics and colors, or even reducing the site to emphasize just its most important piece.

     

Windows 8 Button

Published On: 01/10/2013

Win8 Button

Windows 8 Buttons

This snapshot is not exactly similar to my demo file, But it will give you an idea about buttons. These buttons are created using HTML5 ,CSS3 Features. No scripting feature is used to crate these buttons. Using some basic styling feature we have created these Buttons. I have just used Transition property from CSS3. Another way to create thes buttons is using MetroUI Stylesheet. This one is quite similar to Bootstrap. If you are creating your personal website using MetroUI, then it is the most simple and best way to create buttons. Because it will also improve the load time for each webpage.

     

3D Text Effect On Button

Published On: 28/09/2013

3d Text

3D Text Button

Now in this button we have used Green Color to display the button. The code for this button is very very simple. We have used Button tag to create this button. For styling of this button we have changed its background color to green.We have also added a bit of Border-Radius to remove its shape edges. To make the button appear in a 3D look we have used Box-Shadow. As we all know these are CSS3 Properties and these properties are still not supported by all the browsers. So to avoid this issue we have to use Vendor Prefixes. But it will make our styling code a bit of Complex.

     

3D Button

Published On: 25/09/2013

A simple button, styled with different box-shadows for a 3D-look. The first value of the box-shadow is to give height/depth to the button and the second value is to give shadow to it. There is nothing else in this buttons except this clever use of box shadows.

3D Button

3D Button

     

Border Radius

Published On: 23/09/2013

The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.
CSS rounded corners
thus save us time in creating images and requests to the server. Today, rounded corners with CSS are supported by all of the major browsers: Safari, Chrome, Internet Explorer, Opera, and Firefox. User can try in any of the above linked browsers.The border-radius code is given below with complete details.

     

ChessBoard

Published On: 22/09/2013

Chess Background is a quite simple code created for adding a chessboard background to a particular webpage. This effect is created just using HTML5, CSS3. No scripting is used to create this effect. Also to add the code for this effect is very small. No other plugin or markup is used for this effect. Read More…..
ChessBoard

     

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s