webdeveloper's

CSS3 has all the new features. With these features, we are now able to build image-less websites. Earlier,  We were using image when it comes to showing gradient colors. Now, it becomes much leaner with the use of CSS3 Gradient Background. But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders? Let's see how to do this. First Method The first method is by applying CSS3 Gradient within pseudo-elements. Well, let’s see how the trick works. Top To Bottom Gradient Border We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div, as follows. HTML <div class="box"></div> CSS .box {       width: 400px;       height: 400px;       background: #eee;   } To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. And also create 2 rectangles ...

This article explains you how to create forms in Bootstrap 3. And how to create different types of forms and how to make them responsive. And also explains various validation classes that Bootstrap comes with. Forms are very basic and important HTML components for any website. It is used for many different purposes like getting user feedback, Creating contact us forms, Making status on social media, etc. Forms are here to stay With HTML5, they have even got more powerful. It gives us new attributes which, when added to our forms, do form validation using browser's inbuilt validation capabilities. With Bootstrap 3, we just have to place HTML forms markup and leave the styling part to it. Bootstrap has got many CSS classes and various form layouts that can be created within seconds. So let's build a basic form using Bootstrap 3. Getting started with Bootstrap 3 forms Before we jump into creating forms, we just need to setup Bootstrap files and an html page. So following...

In this tutorial, we look at various CSS input text styles that are great for giving forms on your site a more welcoming and appealing look. Gone are the days of image shadows…we’re doing it with straight up CSS. Adding Beauty To Your Forms Website forms have long had a history of being boring, bland, and unappealing. In the past few years though, CSS and CSS3 have opened up some possibilities for us. Let’s take a look at some ways that we could prettify our forms, by implementing the following various CSS input text styles. Some of these are already popular around the web, and add an attractive and welcoming interface. Let’s get started! Common Markup & CSS All our styles will take on a common set HTML markup and CSS. I’ll also be automatically displaying the :focus style by adding a .focus class. Each style is wrapped in a list element with a simple media query to make it respond to all screen sizes. I also reset all my input styles so that they are consistent across ...

Here, we look at three different ways to achieve equal height columns with just CSS. This is a common scenario that troubles a lot of people, so I’m going to demonstrate some elegant pure CSS solutions. Achieving equal height columns with just CSS is such a common scenario with a few simple solutions. In projects that follow a standard content-sidebar layout, it just helps to have both of the containers seemingly stretch to the bottom of the page. It just looks better, cleaner, and more complete. I’m going to highlight three different ways that this can be achieved, using strictly CSS. No JavaScript, no jQuery to calculate the height of one and set it on the other. Just plain old beautiful CSS. First, let’s look at some graphics below that show us the problem and the desired solution. The Problem The Solution Diving In It’s common for designs/developers to want to achieve this look just purely for aesthetic purposes. It often finishes the page nicer, and makes ever...

Today, we look at achieving a CSS folded corner effect. This is a neat way to add a little extra style and appeal to sections of your site. Introduction The folded corner effect adds a nice little touch to your site, and can easily be done these days with just plain old CSS. Previously, we’d have to create PNG’s and apply them as background images or absolutely positioned elements. Nowadays, that’s just not good enough for maintainability and scalability. Luckily for us, the effect can be easily achieved with good old CSS. We don’t even need to add any markup to our HTML. Let’s first look at the HTML structure, which is beyond simple. The HTML Structure The markup is simple. For our case, we’re going to assume a simple content area wrapped in a section tag. The HTML looks like this: Markup <section>   <h2>Folded Corner</h2>   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt, quidem suscipit...</p...