CSS content and attr

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.

     

Advertisements

Select Menu With Custom Dropdown

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.

     

Fixed and Boxed Layout

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

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.

     

Win 8 Button

Hello Folks! I know you guys are eagerly waiting for my next post. So here I am with my next post. You guys can see that i am working mostly with Buttons these days. Its because these days i am working mostly with Buttons..(Oops I made a POO POO…). So today am post something about Buttons, which exactly looks like Windows 8 Start-up Button. These buttons are created using different colors. A similar snapshot of Buttons is shown below.

Win8 Button

Windows 8 Buttons

     

3D Text Effect On Button

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.