Responsive Web Design Tutorial and Explanation

Comments

Post a Comment

Popular posts from this blog

Revisiting the basics - Position in CSS

Image
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...
Read more

Gradient Border Colors with CSS

Image
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 ...
Read more

10 Useful Libraries and Resources for Responsive Web Design

Image
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 ...
Read more