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

Colorful Scrollbar Within Window

A scrollbar is used to scroll down or scroll up any page. Using some easy HTML and CSS we can create our own styled scrollbar. These scrollbar can have curved edges, it can also be colorful. Depending on the conditions and requirement we can make different types of scrollbar. These will work perfectly for both x-axis and y-axis. The sample demo file is attached below.

Custom Scroll

Custom Scroll

     

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.

     

Simple Form

Hey folks I am back with another post of Simple Form with validation feature. The form looks quite simple as far as looks matters, but this form is infused with a special feature of Form Validation. The Form Validation allows user to enter proper information e.g. In Email field user is asked to enter email so with form validation they are provided with a format in which they have to enter the value. This format is defined using jQuery or Javascript with some Regular Expressions.

In my demo form I have added some text fields, some textarea and few select boxes. I also added a submit button to submit the form. Each field has its own text form decided using Regular Expressions. To learn more about Regular Expressions users can access……