webdeveloper's

Making pretty, responsive, headers is always a tricky process. Until now you needed to use floats or other complicated tricks and you even had to manually adjust pixel values. But not any more! The technique we are about to show you relies on the powerful flexbox layout mode to do all the dirty work for you. It uses just a handful of CSS properties to create a header that is properly aligned and looks good on all screen sizes, while leaving the code cleaner and less hacky. The Technique In our demonstrative example we’ve built a header, which is separated in three sections with typical header content nested within them: Left section – The company logo. Middle section – Various hyperlinks. Right section – A button. You can check out a simplified version of the code bellow. HTML code is where we group the sections in separate div tags. This makes it easier for CSS rules to be applied and generally produces a more organised code. <header> <div cl...

This is a question that comes up more regularly than you might expect. The concept of a responsive website is one of the greatest CSS "tricks" in the books and important enough to step back from in order to both remind ourselves what makes a "responsive" website and how it's different from an "adaptive" one. So, with that, let's look at the difference. The Short Explanation Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser's width). Responsive websites respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout (and perhaps functionality) in a way that is optimized to the screen. Is the browser 300px wide or 30000px wide? It doesn't matter because the layout will respond accordingly. Well, at least if it's done correctly! Adaptive...

Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 10 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning! Basics Let’s start with these articles which explain the basic ideas of responsiveness. 1. Make it Responsive Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.                                                     Make it ...

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here . The HTML The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered: <div class="container"> <h3> All content in here will be centered. </h3> </div> You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page. The CSS As we said earlier, we will be u...

In this article, I'll explain about CSS Position Property — one of the most basic CSS concepts. I will explain with examples each value associated with this property. I hope this will be helpful in better understanding. What is the Position in CSS? "Position" is a CSS property just like other properties. This property helps in placing an element or a group of elements at a particular location with respect to other elements or browser window. The position property accepts 5 different values — static, relative, absolute, fixed and sticky. position : static Adding static position to any element is equivalent to not applying any position property at all. Generally, this value isn't counted in CSS positioning. OK. Let's discuss about the importance of static positioning. Static position allows an element to behave normally. This is extremely useful when you need to override the inherited position value of an element. Properties like z-index, top, bot...

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 ...