Creative Technocrayts

You may read the previous article What is Responsive web design? Viewport meta tag Making the website responsive across all devices might sound intimidating in the beginning but you will find it at ease as you go along. We may use media queries to make our website responsive but to make it work we must use the viewport meta tag. The viewport meta tag helps to control the width and scale the browser. The width = device-width is applied so the website matches the screen’s width. We can also mention a specified width like, width=”800”. The website will adapt to that specified width. Initial scale =1 is used to fix scaling factor of the webpage. It prevents the default zooming of the page. Using this parameter, responsiveness of the page work. Maximum-scale defines the maximum scale it can be zoomed in. Maximum-scale=1 is the maximum-limit and it won’t allow the user to zoom. User-scalable =1 refers the users zooming in and out of the web page. If you want to disable zooming you can...

Responsive web design In today's digital age,there are more mobile platforms and devices emerging in the market. Therefore making our websites accessible to all the clients is very important. As web developers we have the responsibility to develop websites which is adaptable to web platforms and devices of all variations.. An approach of making our websites customer-centric, interactive & adaptive and at the same time providing rich user experience is responsive web design.

Fixing header at the top even though the page scrolls We might have come across few websites were we notice that the header is fixed even though the page is scrolled.  One of the familiar site which uses that is Quora  http://www.quora.com . I tried the simliar mockup of quora feed design using html & css. To fix the header at top, CSS positioning property is used as   position:fixed; Fixed positioning is relative to the containing viewport of the page. No matter, the page is scrolled element will be positioned at the same position. header{     position: fixed;     top:0;     left:0;     width: 100%;     min-height: 50px;     border-top: 2px solid #b92b27;     border-bottom: 2px solid #ddd; } Github link: Github_page Subscribe to Creative Technocrayts and be a part of growing community. Mockup Image:

As we have gone through few css selectors in the CSS Selectors-Part I we will continue to discuss some more now. Pseudo class selectors When we want to style anchor elements when they are hovered or visited or linked For eg, a:link{ color: red; } Visited link a:visited{ color: purple; } X:checked This selector will target a user interface element when it is checked and apply the styles. For eg when the checkbox and radio button is checked. For eg, X:checked{ box-shadow: 5px 5px #dbdbdb; } X:hover Hover pseudo selector is used to apply CSS styles when the anchor tag is hovered. a:hover{ color: #000; background:#fff; border: 1px solid #000; } Attributes selectors Styling elements based on the attributes the tags have. a[title] a[title]{ color:blue; } a[href] This selector will apply the style for anchor tags having title attribute. a[href="http://gmail.com"] { color: #1f6053; } X:after / X:be...

Using CSS selectors Hope the previous article on Understanding html hierarchy   would have been useful to all. This article will help you to write CSS in a better way. CSS selectors are used to write styles more efficient and plays a major role in re usability and maintainability of the code.  Read further to know what are all the CSS selectors available for use.

             When you are new to web development and have just started dirtying your hands with HTML code it is very important to understand the html hierarchy to proceed further.

This article deals with text overflow property of CSS and more emphasis is on ellipsis values over the other values. When the content overflows the container box, it has to be either accommodated in any way or clipped out of container box and should be represented to the user that overflowed content is clipped. It can be shown like visible overflow, clipped, ellipsis or custom string. Text overflow can be applied only for block level container elements as it makes sense only when the word/s being long to fit into the container. To apply text overflow we need to apply overflow :  hidden or scroll or auto property. Overflow: clip is the default value. text-overflow:  clip; This specification clips the content at the limit of the container area. So the truncation may happen at the middle of the character. Inorder to avoid that we need to add an empty string value (‘’). Text-overflow : ellipsis; It is the property wherein three consecutive dots are used to repres...