Various Technical Articles to learn CSS Tricks with easy Examples

Cross Browser pure CSS ToolTip using after and before Pseudo-elements

Biswabhusan Panda — Sat, 28 Jan 2017 16:53:40 +0000

There are several ways to design ToolTip. You can design a tooltip using JavaScript or JQuery or CSS or BootStrap. Compare to Client Script ToolTip pure CSS based tooltip renders better performance. In the below demo I created a ToolTip using pure CSS classes. This is Cross Browser friendly and easy to customize.

“addtooltip” class represents styles for HTML page and mouse over area. Class Tooltip is responsible for the look and feel of ToolTip popup div. Using tooptip:before maintaining mouse cursor type during mouse movement from link to tooltip window. Similarly, using tooltip:after drawing Triangle to the bottom of tooltip rectangle.

Introduction to Tooltips

Tooltips are small, contextual pop-up boxes that provide additional information when a user hovers over or focuses on an element. They enhance user experience by offering concise explanations, definitions, or supplementary details without cluttering the interface. Traditionally, tooltips were implemented using JavaScript, but modern CSS techniques allow for pure CSS-based solutions that are lightweight and performant.

Why Use Pure CSS Tooltips?

Pure CSS tooltips eliminate the need for JavaScript, reducing page load time and improving performance. They are simpler to implement, easier to maintain, and work seamlessly across different browsers when properly structured. Additionally, CSS tooltips degrade gracefully on browsers that do not support advanced CSS features.

Basic Structure of a CSS Tooltip

A pure CSS tooltip consists of two main components: 1. Trigger Element: The element (e.g., button, link, or icon) that activates the tooltip on hover or focus. 2. Tooltip Content: The hidden text or element that becomes visible when the trigger is activated.

In HTML I am with 2 div’s. First Div is addtooltip which contains tooltip div as a child. This Tooltip is based on pure CSS to run this you don’t required any plugin like JQuery or AngularJS.

Example.htm




ToolTip using pure CSS





This is a Demo ToopTip.
I am a tooltip!

toolTip.css

.addtooltip {
background: #ddd;
cursor: pointer; /* Cursor icon to Hand Symbol */
font-size: 30px;
padding: 15px 20px;
margin: 100px 75px 10px 100px;
position: relative;
text-align: center;
width: 210px;
-webkit-transform: translateZ(0); /* Google Chrome Flicker Fix */
-webkit-font-smoothing: antialiased; /* Google Chrome Text Rendering Fix */
}

.addtooltip .tooltip {
background: #9ed3f3; /* Background Color of ToolTip rectangle */
bottom: 100%;
color: #0000FF; /* ToolTip Text Color */
display: block;
left: -25px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
margin-bottom: 15px;
transition: all .25s ease-out;
-webkit-transition: all .25s ease-out; /* Fixing Transition issue in Google Chrome */
-moz-transition: all .25s ease-out; /* Fixing Transition issue in FireFox */
-ms-transition: all .25s ease-out; /* Fixing Transition issue in Safari */
-o-transition: all .25s ease-out; /* Fixing Transition issue in Opera */
transform: translateY(10px);
-webkit-transform: translateY(10px); /* Fixing Transform issue in Google Chrome */
-moz-transform: translateY(10px); /* Fixing Transform issue in FireFox */
-ms-transform: translateY(10px); /* Fixing Transform issue in Safari */
-o-transform: translateY(10px); /* Fixing Transform issue in Opera */
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); /* Fixing box-shadow issue in Google Chrome */
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); /* Fixing box-shadow issue in FireFox */
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); /* Fixing box-shadow issue in Safari */
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); /* Fixing box-shadow issue in Opera */
}

/* While moving your Mouse Cursor to ToolTip this will keep Continuity */
.addtooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}

/* CSS Triangles below ToolTip Rectangle */
.addtooltip .tooltip:after {
border-left: solid transparent 12px;
border-right: solid transparent 12px;
border-top: solid #9ed3f3 12px;
bottom: -12px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}

.addtooltip:hover .tooltip {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
-webkit-transform: translateY(0px); /* Fixing Transform issue in Google Chrome */
-moz-transform: translateY(0px); /* Fixing Transform issue in FireFox */
-ms-transform: translateY(0px); /* Fixing Transform issue in Safari */
-o-transform: translateY(0px); /* Fixing Transform issue in Opera */
}

Common Pitfalls and Solutions

1. Z-Index Issues: Ensure tooltips appear above other elements by setting a high `z-index`.
2. Responsiveness: Use relative units (e.g., `em`, `rem`) for tooltip sizing.
3. Touch Devices: Provide fallbacks for devices without hover support (e.g., tap-to-reveal).

Advanced Techniques

1. Custom Shapes: Use `::before` and `::after` pseudo-elements for arrows or unique designs.
2. Dynamic Content: Combine with CSS variables for reusable tooltip styles.
3. Dark/Light Mode: Adapt tooltip colors using `prefers-color-scheme`.

Conclusion

Pure CSS tooltips are a lightweight, efficient way to enhance user interaction without relying on JavaScript. By leveraging CSS positioning, transitions, and accessibility best practices, developers can create responsive, cross-browser tooltips that improve usability across all devices. With careful attention to design and compatibility, these tooltips provide a seamless experience for users while maintaining clean, maintainable code.

The post Cross Browser pure CSS ToolTip using after and before Pseudo-elements appeared first on OneStop Shop.

Easily Customizable Simple pure CSS3 Treeview Example

Biswabhusan Panda — Tue, 12 Jul 2016 16:37:16 +0000

Generally to display hierarchy of Data we use a Treeview Control. The major advantages of a Treeview control is it loads data partially as per the event triggered. I mean if you have bulk data to display, Treeview is the best option. While loading data depending upon the user click you can expand the specific node with data. From my experience I can say Compare to Script based Treeview pure CSS Treeview performs faster during operation.

In this demo app I Created a expandable and collapsible Treeview using pure CSS and HTML5. It’s simple and can easily Customizable according to your project requirement. To develop this Treeview in my HTML page I am using Order list (OL). Where each li contains nodes as File or Folder. Refer my CSS structure here li presents a Folder. If a li is with the CSS Class “each-node” then it re-presents File. To achieve Sub nodes I am using ol element under Folder li.

In CSS for each node I am checking the file extension and showing “page.png” image. If required you can update this to specific image Files. To handle the toggle operation I am applying checked attribute over each checkbox. To prevent Checkboxes from user view I am hiding them using “display: none”. Using the Tree view you can create upto n number of nodes with any depth.

Pure CSS3 Customizable Treeview Example






Simple pure CSS Treeview Example





SEO


On-page SEO

Title Optimization
Keywords Optimization
Meta Tag Optimization



Off-page SEO

Link Building
Social Media Marketing
Forum Posting
Email Marketing


Others


Web Design
Graphics Designing
DevOps
Digital Marketing
Pay Per Click program
Domain Registration

main.css

Using this CSS3 Treeview you can use specific icons with your nodes for File. Here in the below sample code I am checking for 4 kinds of Files pdf, html, css and js. In style here I am using Verdana, Helvetica fonts for my treeview. To make the toggle function live in this demo app I am using 2 images Toggle-Expand.png and Toggle-Collapse.png. For demo purpose you can download these images from here.

body, li { background: #424242; color: #FFF; margin: 0; padding: 0; font-family: Verdana, Helvetica; }
img { border: none; }

/* CSS Treeview Styles */
ol.tree-demo { padding: 0 0 0 30px; width: 300px; }
li { position: relative; margin-left: -15px; list-style: none; }
li.each-node { margin-left: -1px !important; }
li.each-node a { background: url(page.png) 0 0 no-repeat; display: block; padding-left: 21px; color: #fff; text-decoration: none; }

/* Checking document type to Show page icon */
li.each-node a[href *= '.pdf']	{ background: url(page.png) 0 0 no-repeat; }
li.each-node a[href *= '.html']	{ background: url(page.png) 0 0 no-repeat; }
li.each-node a[href $= '.css']	{ background: url(page.png) 0 0 no-repeat; }
li.each-node a[href $= '.js']	{ background: url(page.png) 0 0 no-repeat; }

li input { position: absolute; left: 0; opacity: 0; margin-left: 0; cursor: pointer; z-index: 2; width: 1em; height: 1em; top: 0; }
li input + ol { background: url(Toggle-Expand.png) 40px 0 no-repeat; height: 1em; margin: -0.938em 0 0 -44px; }
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label { background: rgba(0, 0, 0, 0) url("Folder-Symbol.png") no-repeat scroll 12px 3px; padding-left: 36px; cursor: pointer; display: block; }
li input:checked + ol { background: rgba(0, 0, 0, 0) url("Toggle-Collapse.png") no-repeat scroll 40px 5px; height: auto; margin: -1.25em 0 0 -44px; padding: 1.563em 0 0 80px; }
li input + ol { position: relative; top: -3px; }
li input:checked + ol > li { display: block; margin: 0 0 0.125em; }
li input:checked + ol > li:last-child { margin: 0 0 0.063em; }

In the above CSS Codes I used 1 CSS pseudo-class :last-child.

Required images for Simple Treeview

Here for demo purpose I created the below 4 images. You can use these images in any treeview control.

The post Easily Customizable Simple pure CSS3 Treeview Example appeared first on OneStop Shop.

Easily Customizable pure CSS Tab view Control Example

Biswabhusan Panda — Mon, 11 Jul 2016 18:01:18 +0000

To display multiple panels in a specific area generally we prefer to use tab view. Tab view is a user friendly Control. The major advantages of Tab view Control is it loads once during page load. Once the tab view appeared in a HTML page then during navigation it doesn’t required page refresh. I noticed in many web developers are using Script based tab Control. But Compare to Script based tab Control pure CSS tab view Control gives better performance. The cause in this demo app I created an easily customizable pure CSS tabs for you.

The logic I implemented here is so simple. In my HTML page I have one UL element which contains 6 li elements. The First li element is with Tab links in the shape of HTML label controls. Which internally linked through id to respective radio buttons. Here I used radio type input box to take benefits of Single selection. I mean while tab 1 is active other tabs required to stay disabled. After First child of UL element rest li’s are with a radio button and div. Div’s are responsible to hold panel contents. As per your requirement here you can add n number of tabs. To run this demo app simply copy the following files to the root directory and open index.html.

index.htm

Pure CSS tab Control Example

Example to Create your Own CSS Tabs

Link 1
Link 2
Link 3
Link 4
Link 5

Link 1
After the Success of his other books, Sanjeev Kapoor continues to enter the hearts of food lovers through their Stomachs.

Link 2
In this book he hands us the key to a delicious khazana of Indian cuisines. It offers several recipes that have been chosen from a vast repertoire of delicacies in Indian cooking. Called Khana Khazana: Celebration of Indian cookery, this book, now in its seventh edition, has been designed to familiarize food lovers with a long forgotten cuisine.

Link 3
Indian cuisine is getting popularity all over the world and is available in the most parts of the globe but it is restricted to a select few dishes. There is an enormous range that remains unexplored. Each of the state and each region has its own cuisine and local flavor. In this book, we are introduced to a variety of dishes that have been perfected by our ancestors.

Link 4
Here is an array of vegetarian, non-vegetarian recipes from Bengal, Maharashtra, Gujarat, the north of India, the southern states, which come with that special touch of the master chef. Macher jhol, bhajanee thalipeeth, Andhra Chilli Chicken, Kolambi bhaat, dhaabay di dal, rayalseema pesarettu, dhokar dalna, modak... the mouth watering list is endless.

Link 5
All you need to do to bring the diversity of India into your home, is to start in your own kitchen and share the passion that Indian food is the best!

main.css

body { background: #BDBDBD none repeat scroll 0 0; line-height: 28px; font-family: Helvetica; font-size: 16px; word-wrap: break-word !important; }

h1 { color: #FFF; font-size: 30px; margin-top: 90px; line-height: 1.5; text-align: center; }
h2 { margin: 0 0 8px 0 }

.tabs-ctrl { list-style: outside none none; margin: 0 auto; padding: 0; width: 700px; }
.tabs-ctrl li { display: block; }
.tabs-ctrl label { background: #5F4C0B none repeat scroll 0 0; border-radius: 6px 6px 0 0; color: #FFF; cursor: pointer; display: inline-block; float: left; font-size: 16px; font-weight: normal; margin-right: 3px; padding: 4px 20px; }
.tabs-ctrl label:hover { background: #3498db; }
.tab-inner { background-color: #FFF; display: none; line-height: 22px; padding: 15px; width: 100%; }
.tabs-ctrl input[type=radio] { display:none; }

.link-labels:after { content: ''; clear: both; display: table; }

[id^=tab-rbtn-]:checked ~ div[id^=tab-inner-] { display: block; }
[id^=tab-rbtn-]:checked ~ [id^=tab-label-] { background: #08C; color: white; }

The post Easily Customizable pure CSS Tab view Control Example appeared first on OneStop Shop.

How to install SASS on Windows? – SASS Getting Started

Nibedita Panda — Sun, 15 May 2016 17:58:42 +0000

As a UI Developer you must fetched few real-time problems while working in CSS. For an example how it is if we will declare a color variable and refer that in all classes with same color code. Such kind of problems we can fix using SASS. SASS gives power to CSS. SASS is a feature rich powerful CSS extension language. SASS is compatible with all versions of CSS. We can structure our CSS using SASS.

The complete name of SASS is “Syntactically Awesome Stylesheets”. It was developed by Natalie Weizenbaum in 2006. Using SASS including default behaviors of CSS additionally we can do selector inheritance, nested rules, variables, inline imports & mixins. SASS is available in 2 versions. The first version is SCSS (Sassy CSS). The extension of SCSS file is .scss.

SASS Getting Started

Nesting: In Sass we can able to nest selectors in the same hierarchy as of HTML.

Variables: Using Sass it can possible to store any CSS values to variables. Variable name begins with a dollar($) sign and assignment uses a colon (:). We can do arithmetic operations to variables also.

Mixins: In SCSS using Mixins technique we can define styles & the same styles can re-used throughout the stylesheet. To make more programmer friendly we can also pass arguments to Mixins.

Inheritance: Using @extend selector in Sass we can inherit the styles from an another selector.

Partials: To made modularization easy Sass introduced partial Sass files technique. A partial Sass file is named with a leading underscore, like _tempvariables.scss. This file is not converted to a CSS file. But we can import partial Sass files with the @import directive.

How to install SASS on Windows?

To install SASS in Windows first you required to download Ruby. You can download ruby from http://rubyinstaller.org. Once you installed with ruby start the command prompt. From Command line to install Sass gem run the following Command:

gem install sass

SASS required one line Command to Setup. During installation if you found downloading issue, you can download the setup file manually from https://rubygems.org/gems/sass.
To double check whether SASS installed successfully or not you can issue the following command.

sass -v

This will give you the version number of current installation like “Sass 3.4.22 (Selective Steve)”.
SASS to CSS. Using the following command you can convert a SASS file to CSS.

sass input.scss output.css

SASS compiler can watch the changes in the SASS file and update the CSS using the following Command:

sass –watch input.scss:output.css

The post How to install SASS on Windows? – SASS Getting Started appeared first on OneStop Shop.

Easily Customizable Responsive Pure CSS Accordion Example

Nibedita Panda — Sun, 15 May 2016 17:57:32 +0000

While displaying a Single panel using expand and collapse effects from the list of panels we generally prefer to use Accordion. In a web application Accordion helps to display large number of contents in less area. There are many ways to create an Accordion. I noticed many developers uses scripting languages to design an accordion. I can say this is a bad practice. Whether Server resource or Client resource we prefer to use as less as possible. The advantages of Pure CSS Accordion is it takes less time to load and easily Configurable.

Here in this demo app I am using pure CSS with HTML5 to prepare a Easily Customizable Responsive Accordion. This is completely responsive and cross-browser compatible. You can use this by simply coping the below files.

Pure-CSS-Accordion.htm




Pure CSS Accordion Example






NETWORK LAYER

Network layer forms the third layer from top in the TCP/IP model. It does the functionality of transferring packets between networks. Internet protocol (IP) is an example of network layer protocol. IP performs the basic task of sending packets of data from source to target.



DATA LINK LAYER

The data link layer is the second layer. This layer has the functionality of adding the header information to the packet and also to transfer packets to the physical layer. The layer where packets are intercepted and sent over a virtual private network.



PHYSICAL LAYER

The first layer in TCP/IP model is Physical layer. It is accountable for encoding and spread of data through network communications media. It sends the data in the form of bits from the Physical layer of the source device and is received at the destination device. It also contains many hardware-related network design issues. For example, LAN, WAN and wireless technology.

master.css

.accordion { width: 100%; }
.accordion .panel { display: block; height: 35px; padding-left: 20px; font: bold 14px/35px Arial, Verdana; text-decoration: none; color: #eee; background: #66BECA; }
.accordion .panel:hover,.accordion div:target .panel { color: #2b3b06; }
.accordion div .expandable { display: none; margin: 8px 5px 5px 20px; font-family: Arial, Verdana; font-size: 15px; }
.accordion div:target .expandable { display: block; }
.accordion > div { height: 40px; overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.accordion > div:target { height: 200px; background: #E3E6E6; margin-bottom: 5px; }

The post Easily Customizable Responsive Pure CSS Accordion Example appeared first on OneStop Shop.

CSS Best Practices & Style Guide for Web Designers

Nibedita Panda — Sun, 15 May 2016 17:13:24 +0000

Designing a Software is not a Single handed job. Multiple resources required to build an application. Let’s assume in your lab 10 resources are working as a Team. Here if your Style Guide is different from others then practically it takes time for other developers to understood or update your Codes. Unplanned Coding Standard waste quality time of a Developer. It is advisable to maintain similar CSS Style Guide during you generate CSS Styles. In this session let us share few CSS best practices to improve your Coding Standard.

To decorate a HTML page CSS is the Structural approach. Generally we use CSS for creating visually engaging websites or user interfaces of a web applications/mobile applications. Initially CSS was introduced by “Hakon Wium Lie” & “Bert Bos” in the year of 1996. This technology is approved by W3C (World Wide Web Consortium). The main objective behind the innovation of CSS is to separate HTML & Styles. CSS helps to customize user interface centrally.

CSS Best Practices

1. If multiple HTML elements required same style but their CSS Class names are different use grouping. When grouping selectors for each class choose new line. For an example:

/* Bad CSS practice */
.tabView, .tabView-prev, .tabView-next, .tabView [type=text] {
background-color: #FF0000;
padding: 20px;
margin: 10px 10px 12px;
}

/* Good CSS practice */
.tabView,
.tabView-prev, 
.tabView-next, 
.tabView [type=text] {
background-color: #FF0000;
padding: 20px;
margin: 10px 10px 12px;
}

2. While declare value to an attribute include a space after colon (:). For an example in place of margin:10px; it is a good practice to use margin: 10px;.

3. Practice to add semi-colon (;) at the end of each property and value pairs. For an example padding: 20px;.

4. While defining a class name or id choose lowercase letters with meaning full words. If your class name is more than one word for separation in between each words use hyphen (-). For an example to define a tab sub-menu class you can use “tab-submenu”.

5. While declaring hsl(), rect(), rgba() or rgb() never include space in between comma separated values. For an example while declaring rgb() use rgb(0,10,0,.5) in place of rgb(0, 10, 0, .5). This practice helps to differentiate multiple color values (comma with no space) from multiple property values (comma including space).

6. In place of color parameters or property values while defining a floating point value avoid 0 as the prefix. For an example in place of 0.5px use .5px.

7. Specially while using hexadecimal codes use lowercase letters with shorthand expressions. For an example use color: #fff; in place of color: #FFFFFF;.

8. While creating a selector with attribute & value pair use double quote to define value. For an example input[type=”text”].

9. While specifying 0 value for a property avoid unit notation. For an example replace margin: 0px; with margin: 0;.

10. Inside a CSS Class while declaring multiple properties maintain sequence as Position, Box Model, Typographic and Visual.

.tab-submenu {
/* Positioning Properties */
position: relative;
top: 10px;

/* Box-model Properties */
display: block;
margin: 10px 10px 12px 0;

/* Typography Properties */
font: normal 13px "Verdana", sans-serif;

/* Visual Properties */
background-color: #f6f6f6; 
}

11. While embedding external CSS files to your HTML page avoid @import. Compare to @improt takes more time to load.





@import url("tab.css");

12. Common overused shorthand properties are padding, margin, font, background, border & border-radius. Strive to limit use of shorthand expressions to instances where you must explicitly set all the available values.

13. While commenting a class ensure that your comment is descriptive and easy to approachable by others.

14. While Creating a CSS file follow the structure approach as Global, Type, Forms, Header, Navigation, Content & Footer in Sequence.

The post CSS Best Practices & Style Guide for Web Designers appeared first on OneStop Shop.

CSS3 Animation Examples using Keyframe and its Properties

Nibedita Panda — Sun, 15 May 2016 07:26:10 +0000

As you know in the early age of web programming generally we generally do animation using JavaScript, Jquery or Flash. But these methods are having some limitation. Using JavaScript or Jquery it is required that Client machine need to allow Scripts to run. Similarly using Flash animations frames are not SEO friendly. These problems are addressed in CSS3 animation. Compare to JavaScript & Flash animation CSS3 animation results better performance. To get started with CSS3 animation look at the below CSS3 Animation Examples.

Examples.htm



CSS3 Animation Examples using Keyframe

In the above block of code I did a small animation using CSS3. I have a div in my HTML page. Initially it has its background color green. Later using CSS3 @keyframes I am updating background color to red. To apply @keyframe on my div I added the animation-name “animationDemo”. Then followed by @keyframes I am assigning From & To properties of animationDemo class. In From block I declared the initial state as background color green. Then in To block I am updating background color to red. This example is for demo purpose. Using From & To properties of @keyframes you can implement any kind of animation in CSS3.

List of CSS3 Animation Properties

To know more about CSS3 Animation here in below I am describing all its properties. Starting from Animation direction to Speed of animation these properties will help you.

Properties	Description
@keyframes	@Keyframe comes with From & To parts. To do an animation in this block we can specify the required CSS. From generally contains the default state. Where To contains the final state of animation.
animation	A shorthand property for setting all the animation properties.
animation-delay	Some time we required some interval to start animation. For an example after successful submission I want to show a green flag in my page. In this case using animation-delay property we can specifies the interval to start the animation. The default value for this property is 0.
animation-direction	Animation can occur in any direction. It can be top to bottom or left to right. In case you want reverse, I mean bottom to top or right to left this property helps. Using animation-direction property we can reverse direction or alternate cycles of an animation. Animation direction comes with the following properties normal, reverse, alternate, alternate-reverse, initial & inherit. To know more about these properties you can refer animation-direction properties.
animation-duration	An animation can be a single cycle or can be repeated cycle. Using animation-duration you can defines how many seconds or milliseconds an animation takes to complete one cycle.
animation-fill-mode	In case some where you want to stop your animation in this case animation-fill-mode works. This property help to specify a specific style for the element when the animation is not playing.
animation-iteration-count	In case you want you animation need to repeat for certain number of time in this case you can use this property. Here if you specify the number of times an animation need to play, that animation will repeat this much time.
animation-name	Defines the name of animation. Which we use for @keyframes.
animation-play-state	Assume in your animation you want to provide pause button. I mean in between the animation you want to give a facility to the customer that he can pause the animation in any point of time. For this case animation-play-state property is useful. Using this property you can define whether the animation is running or paused.
animation-timing-function	Specifies the speed curve of the animation.

The post CSS3 Animation Examples using Keyframe and its Properties appeared first on OneStop Shop.

Example of SASS Mixin, Variables, Partials, Inheritance & Nesting

Nibedita Panda — Sun, 15 May 2016 06:48:41 +0000

Technology updates everyday. I am a UI developer, first time when I heard about SASS I started searching in Google to know “What is SASS?”. Off course I am an expert in CSS but how SASS is different from CSS? What are the advanced feature SASS provides compare to CSS? When CSS is here why SASS is introduced? Like plenty of queries I have at the Starting. Then I explore few advanced features of SASS such as SASS Mixin, SASS Variables, SASS Partials or SASS Nesting. In below sharing all those experiences with Example of SASS features.

The full name of SASS is “Syntactically Awesome Stylesheets“. It is a CSS extension language in run-time which is compiled into CSS. Large style sheets can easily maintain by SASS. SCSS is one of two syntax’s of SASS which uses block formatting like CSS. The extension for SASS file is .scss.

Steps to install SASS

To Getting Started with SASS, we need to install it first. Installer version of SASS is SASS gem. In Windows Operating System to run SASS we required Ruby at a min.

From Command line to install Sass gem run the following Command:

gem install sass

During installation if you found downloading issue, you can download the setup file manually from https://rubygems.org/gems/sass.

To run SASS from command line:

sass input.scss output.css

Sass can watch the changes in the Sass file and update the CSS using the following Command:

sass –watch input.scss:output.css

Advanced Features of SASS

Sass has introduced the following advanced features:

Nesting
Variables
Mixin
Inheritance
Partials

SASS Nesting

Nesting improves readability by visually representing the HTML structure, reducing redundancy, and making it easier to manage complex styles. However, over-nesting can lead to overly specific selectors, so it should be used judiciously.

In SASS we can able to nest selectors in the same hierarchy as of HTML.

Example of SASS Nesting:

SCSS code	Output CSS
ul { list-style: none; li { display: inline-block; a { padding: 15px 20px; } } }	ul { list-style: none; } ul li { display: inline-block; } ul li a { padding: 15px 20px; }

SASS Variables

Variables in SASS allow developers to store reusable values such as colors, fonts, and spacing, making stylesheets more maintainable. In CSS, variables were introduced later (CSS Custom Properties), but SASS has supported them for much longer with broader browser compatibility.

SASS variables are compiled into static values, making them more predictable in older browsers. They also support mathematical operations and can be scoped within selectors, providing greater flexibility.

Using SASS it can possible to store any CSS values to variables. Variable name begins with a dollar($) sign and assignment uses a colon (:). We can do arithmetic operations to variables also.

Example of SASS Variables:

SCSS code

Output CSS

/*Sass Variables*/
$font-normal: Arial, Verdana;
$primary-color: #DDDDDD;
/*Class*/
body {
font-family:  $font-normal;
background: $primary-color;
}

body {
font-family:  Arial, Verdana;
background: #DDDDDD; }

SASS Mixin

In SASS using Mixin technique we can define styles & the same styles can re-used throughout the stylesheet. To make more programmer friendly we can also pass arguments to Mixin.

Example of SASS Mixin:

SASS code

Output CSS

@mixin border-radius($value) {
-webkit-border-radius: $value;
-moz-border-radius: $value;
-ms-border-radius: $value;
border-radius: $value; }

.button { 
@include border-radius(12px); 
}

.button {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px; }

SASS Inheritance

SASS inheritance, using `@extend`, allows selectors to inherit styles from another, promoting DRY (Don’t Repeat Yourself) principles. Unlike CSS, where inheritance is limited to native cascading, SASS enables explicit style sharing.

Using @extend selector in SASS we can inherit the styles from an another selector.

Example of SASS Inheritance:

SASS code	Output CSS
.color-yellow { color: #fc0; } .button { @extend .color-yellow; }	.color-yellow, .button { color: #fc0; }

SASS Partials

To made modularization easy SASS introduced partial SASS files technique. A partial SASS file is named with a leading underscore, like _tempvariables.scss. This file is not converted to a CSS file. But we can import partial SASS files with the @import directive.

Example of SASS Partials:

@import "tempvariables";
@import "modules";

Conclusion

SASS provides significant advantages over traditional CSS with features like nesting, variables, mixins, inheritance, and partials. These tools enhance code maintainability, reduce redundancy, and streamline development workflows. While CSS is essential for web styling, SASS’s advanced functionalities make it a powerful extension for modern developers. By leveraging these features, teams can write cleaner, more efficient, and scalable stylesheets.

The post Example of SASS Mixin, Variables, Partials, Inheritance & Nesting appeared first on OneStop Shop.

CSS3 New Features (Gradients, Webfonts, Transitions, Shadow Effects…)

Nibedita Panda — Sun, 15 May 2016 06:23:45 +0000

In the world of Software Development more revisions means more features. What ever the Software you develop in the initial stage you need to prepare the basic version. Later depending upon the Customers feedback you need to enhance your Software. The same story happened here, CSS3 is the third revision of Cascading Style Sheets (CSS). Initial version of Cascading Style Sheets (CSS V.1) was developed by Bert Bos, Hakon Wium Lie & World Wide Web Consortium (W3C) & released on 17th December 1996. Later further versions (CSS V.2 & CSS V.2.1) released to stay update with market demand. CSS2 run over the market for several years. During this period it was observed that there are some areas where CSS2 can be update. These updates will save programmers time & can help to improve performance in web designing. Let us discuss those CSS3 New Features.

Calc() Function

Calc() is a mathematical function. In CSS3 it is used to Calculate values. Let’s talk about a case where I want a div with width 100% but from right side of browser window I required a gap of 50 pixels. In this case using CSS2 you can do this by declaring div width to 100% & additional you need to set margin for right side of the div. The same you can achieve in CSS3 without setting margin. Here calc() function helps. Look at the class below.

.myDiv {
/* Using Calc() function to Calculate the width */
width: calc(100% - 50px);
background-color: #DDD;
}

Gradients

You may remember the early age of programming, where to achieve a Gradient horizontal bar we generally do create an image with 1px width & Gradients background colors as we required. Then repeating that image as a background of the div. If any time we required to update the Gradients color, first we need to update that image. Do you don’t feel this is little bit time consuming job & required more focus to maintain. That’s why CSS3 introduced a new feature Gradients. Using this you can easily create a Gradient background with a single line of code.

Generally CSS3 Gradients are 2 types Linear & Radial Gradient. Linear Gradient by default is Top to Bottom. You can customize linear gradient in various ways. Look at the examples below.

Example of Linear Gradient from Top to Bottom (By Default):

.li-grad {
background: linear-gradient(#0A65D4, #98BAE2); /* Default One */
background: -webkit-linear-gradient(#0A65D4, #98BAE2); /* For Safari & Google Chrome */
background: -o-linear-gradient(#0A65D4, #98BAE2); /* For Opera */
background: -moz-linear-gradient(#0A65D4, #98BAE2); /* For Firefox */
}

Example of Linear Gradient from Left to Right:

background: linear-gradient(left, #0A65D4, #98BAE2); /* Default One */
background: -webkit-linear-gradient(left, #0A65D4, #98BAE2); /* For Safari & Google Chrome */
background: -o-linear-gradient(left, #0A65D4, #98BAE2); /* For Opera */
background: -moz-linear-gradient(left, #0A65D4, #98BAE2); /* For Firefox */

Example of Linear Gradient Diagonally:

background: linear-gradient(left top, #0A65D4, #98BAE2); /* Default One */
background: -webkit-linear-gradient(left top, #0A65D4, #98BAE2); /* For Safari & Google Chrome */
background: -o-linear-gradient(left top, #0A65D4, #98BAE2); /* For Opera */
background: -moz-linear-gradient(left top, #0A65D4, #98BAE2); /* For Firefox */

background: linear-gradient(bottom right, #0A65D4, #98BAE2); /* Default One */
background: -webkit-linear-gradient(bottom right, #0A65D4, #98BAE2); /* For Safari & Google Chrome */
background: -o-linear-gradient(bottom right, #0A65D4, #98BAE2); /* For Opera */
background: -moz-linear-gradient(bottom right, #0A65D4, #98BAE2); /* For Firefox */

Example of Linear Gradient using Angles:

background: linear-gradient(180deg, #0A65D4, #98BAE2); /* Default One */
background: -webkit-linear-gradient(180deg, #0A65D4, #98BAE2); /* For Safari & Google Chrome */
background: -o-linear-gradient(180deg, #0A65D4, #98BAE2); /* For Opera */
background: -moz-linear-gradient(180deg, #0A65D4, #98BAE2); /* For Firefox */

Example of Linear Gradient using Multi-Color:

background: linear-gradient(red, green, yellow, white, blue); /* Default One */
background: -webkit-linear-gradient(red, green, yellow, white, blue); /* For Safari & Google Chrome */
background: -o-linear-gradient(red, green, yellow, white, blue); /* For Opera */
background: -moz-linear-gradient(red, green, yellow, white, blue); /* For Firefox */

Example of Radial Gradient:

.ra-grad {
background: radial-gradient(to bottom, #0A65D4, #98BAE2); /* Default One */
background: -webkit-radial-gradient(#0A65D4, #98BAE2); /* For Safari & Google Chrome */
background: -o-radial-gradient(#0A65D4, #98BAE2); /* For Opera */
background: -moz-radial-gradient(#0A65D4, #98BAE2); /* For Firefox */
}

Rounded Corners

Followed by Customer Demand many times we required to implement round corner content area. You may recall those days when we use images to achieve this. This difficulty is addressed in CSS3. To round corner of a div you required only one CSS property border-radius. Look at the example below:

.myDiv {
border: 2px solid #000000;
border-radius: 15px; /* Default One */
-webkit-border-radius: 15px; /* For Safari & Google Chrome */
-o-border-radius: 15px; /* For Opera */
-moz-border-radius: 15px; /* For Firefox */
width: 100px;
}

Webfonts using CSS3

Year back in web programming we have limited web-safe fonts. How this is if we have a central store from where we can add any kind of fonts to our application? The same thing CSS3 did. Using CSS3 web-fonts you can use fonts from On-line. Few popular font directories are Google Fonts and typekit. Integrating fonts using CSS3 webfonts is very easy. Morden web-fonts comes with vector graphics. On the way of better performance these icons helps a grate. It reduces http requests & load time. Look at the examples below how to use CSS3 webfonts.

In HTML Head:


This is the example of using webfonts in CSS3.

CSS Class:

.webfonts {
font-family: Satisfy, cursive;
font-weight: normal;
font-size: 14px;
}

Border Images

In the previous versions of CSS3 you can’t set image for border. Only border color you can define. It was found in many places programers required to add image around. To full fill this CSS3 introduced border-image property. Using this you can easily set border image. The only trick you need to follow is according to your image height you need to set border-width & make border transparent. Look at the example below.

border:40px solid transparent;
border-image: url(img/decoration.png) 40 40 round;

CSS3 Media Queries

Today there are several devices from where users are accessing web. To make a web page compatible for any resolution & various devices CSS3 introduced Media Queries. Media Queries are the technique using which you can write CSS for any specific media. Let’s talk about a mobile device with resolution 320px. In this case to optimize your web page for this resolution you can use media queries. To know more about CSS3 Media Queries please refer our another release Introduction to CSS3 Media Queries.

Example:

@media screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles for Screen Resolution 768px to 1024px */
}

@media screen and (max-width: 600px) {
/* Styles for Screen Resolution up to 600px */
}

Advanced Selectors

Selector is a key in CSS. Using Selector in CSS we do categories the HTML elements for specific Style. You must aware of various of selectors using CSS2. Still in the real-world of programming programmers found various scenarios where they required some additional selectors. That all is introduced in the latest revision of CSS. From the following examples you can track advanced CSS3 selectors.

Example:

/* CSS3 Selector to select first letter from span's: */
span::first-letter {
background-color: #DDD;
font-size: 14px;
font-style:normal;
color: #FF0000;
}

/* CSS3 Selector to select first line from span's: */
span::first-line {
font-style: bold;
font-size: 16px;
font-family: Arial;
}

/* CSS3 selector to select first and last elements */
.elem:first-child, .elem:last-child {
background-color:#DDDDDD;
}

/* From nth elements how to set style for only odd elements */
.elem:nth-child(odd){
border-radius:30%;
}

/* Target elements by attribute */
.elem[data-foo=bar1] {
background-color: #DDD;
}

CSS3 Animations & Transitions

Compare to Flash or JavaScript animation CSS3 animation render faster. Animation is a new feature introduced in CSS3. Performance wise CSS3 animations are more programmers friendly. In this session let us make you clear about the trick to use CSS3 animation.

In CSS3 animation 2 major properties are “animation” & “@keyframes”. Refer to the below example I have a div with a class “animation”. To apply animation on this div I created a class animation. Inside the class I added CSS3 property animation: demoAnimation 5s;. Here demoAnimation is controlled by keyframes. Using @keyframes we need to define from & to properties. As in this example I am moving a div from left to right, I positioned the div to absolute and applying left property from 0 to 200px. Read more…




This is a Div.

CSS3 Shadow Effects

Using Shadow effects we can get 3D look. If you worked for various Customers & their requirements you must observed in many places Customer wants to use shadow effect. Lets take an example of a login page. Generally login page comes with a central panel. To make this more attractive Customer ask us to put shadow effects. This problem is noted down by CSS3 & in CSS3 they addressed this problem. Using one property in CSS3 you can easily add shadow effect to any HTML element. CSS3 shadow is two types Text Shadow & Box Shadow. Look at the example below.

Text Shadow:

p { 
text-shadow: 3px 3px 6px green;
}

Box Shadow:

span {
box-shadow: 6px 6px 6px green;
}

The post CSS3 New Features (Gradients, Webfonts, Transitions, Shadow Effects…) appeared first on OneStop Shop.

How to Create div based CSS3 Table without using HTML5 Table tag?

Biswabhusan Panda — Sat, 14 May 2016 18:41:27 +0000

Assume in your HTML page you are going to display 5000 records using a Table. In this case HTML table tag creates problem during loading. Until 5000 records fetched from the database, table will not render. This delay creates performance issue in web development. To avoid this scenario div is introduced. Div loads faster then a table. Partial loading feature supported by div. While all the row & columns of a table comes with in the single control div presents each row & column independently. Let us share the example how to create div based CSS table.

Look at the example below here I did created similar to table structure using Div & CSS. To make this simple I used only 3 CSS classes tableHeader, row & column. In HTML followed by the basic principle creating the row & inside row creating columns. To separate tableHeader in place of row class I used tableHeader.

div based CSS Table Example




How to Create div based CSS3 Table?




Employee Name
Designation
Salary


Biswabhusan Panda
Sr. Team Lead
80000 INR


Supriti Kabi
Software Engineer
60000 INR


Nibedita Panda
Jr. Software Engineer
45000 INR


Ragini Sahoo
Mechanical Engineer
25000 USD


Sonam Panda
Jr. Software Engineer
1500 USD


Subha Roy
Software Engineer
17000 INR


Mohini Srivastab
Mechanical Engineer
25000 INR


Manjulata Panda
Business Head
5000 USD

Another way to Create div based CSS3 Table

You must aware of 2 most wanted CSS3 properties float: left and float: right. Generally we use these syntax to place 2 or more div’s side-by-side. Using these properties you can create HTML Table like structue using div. Additionally, in this method you have to take care of clearfix. clearfix is a CSS class which comes with “clear: both;”.

The post How to Create div based CSS3 Table without using HTML5 Table tag? appeared first on OneStop Shop.

Why CSS3 Media Queries are beneficial for Responsive Web Designing?

Biswabhusan Panda — Sat, 14 May 2016 18:10:45 +0000

Today web is one of the fastest data media in the world. Everyday more than millions of people are searching various information in web. I can say web is the dictionary for information. Looking into this demand today web is not only available to computers but also you can access web from several devices. Technically speaking several devices means several resolutions. As an experienced UI developer you need to consider all those devices & their resolutions while design a web-page. I mean to say while the end-user will fetch your web-page from any device, your web-page must need to compatible for that resolution depending upon the devices. This is called Responsive web designing.

On the way of responsive web designing CSS3 introduced Media Queries. Those are very powerful to handle any resolution related CSS styles. Let’s talk about some standard devices before move into media queries.

Standard Devices

Devices	Resolution (In Width)	Pixels Ratio
iPhones 4 & 4S	320px – 420px	2
iPhones 5 & 5S	320px – 568px	2
iPhones 6	375px – 667px	2
iPhones 6+	414px – 736px	3
Galaxy S3	320px – 640px	2
Galaxy S4	320px – 640px	3
HTC Phones	360px – 640px	3
iPad mini	768px – 1024px	1
iPad 1 & 2	768px – 1024px	1
iPad 3 & 4	768px – 1024px	2
Galaxy Tablets	800px – 1280px	NA
Nexus Tablets	601px – 906px	1.332
Kindle Fire HD 7″	800px – 1280px	1.5
Kindle Fire HD 8.9″	1200px – 1600px	1.5
Laptops	1200px – 1600px	1 & 2
Apple Watch	42mm – 38mm	NA
Moto 360 Watch	218px – 281px	NA

Now from the above list you can understood how resolution varies from device to device. To optimize our web for various resolutions let us discuss how media queries are helpful.

Introduction to CSS3 Media Queries

Media Queries are CSS3 techniques through which we can detect width, height, aspect ratio, color, orientation or media types of any device. It helps to separate specific device depended style blocks. Look at the example below.

@media screen and (min-width: 768px) and (max-width: 1024px) {   
/* Styles for Screen Resolution 768px to 1024px */
}

@media screen and (max-width: 600px) {
/* Styles for Screen Resolution up to 600px */
}

In this two block of code first block is for the screen resolution 768px to 1024px & the second one is for screen width 600px or less.

Syntax for CSS3 Media Queries

There are two ways to write media queries. One is “Embed CSS” & the other one is “Linked CSS”.

Embed CSS Syntax:

@media not|only mediatype and (media feature) {
/* Required Styles */
}

Linked CSS Syntax:

Using linked CSS you need to create separate style sheet files for respective devices. To refer those files you can use link tag with conditional media types & features.

Media Types

Value	Description
All	Used for all media type devices.
print	Used for printers.
screen	Used for computers, laptop, tablets, phones etc.

Common used Media Features

Value	Description
aspect-ratio	Aspect Ratio is nothing but the ratio between between width & height of the Screen.
color	Defines the number of bits per color component for the Screen.
width	Define the width of Screen.
height	Define the height of Screen.
max-width	Defines the maximum width of the Screen.
min-width	Defines the minimum width of the Screen.
max-height	Defines the maximum height of the Screen.
min-height	Defines the minimum height of the Screen.
resolution	Defines the resolution of device, using dpi or dpcm.
orientation	Defines whether the Screen is in landscape mode or in portrait mode.

The post Why CSS3 Media Queries are beneficial for Responsive Web Designing? appeared first on OneStop Shop.

Horizontal Navigation menu with sub-menu using pure CSS Source Code

Nibedita Panda — Sat, 14 May 2016 07:41:04 +0000

Compare to JavaScript or a JQuery menu pure CSS menu gives better performance. Are you looking to create a horizontal menu with sub-menu for your web applications without using any third-party plugins? If so this example will help you. In this demo app we Created a responsive horizontal navigation menu using pure CSS. This menu works for all browsers like Google Chrome, Firefox and Safari. You can customize this source codes as per your business need.

Desktop View:

Mobile View:

Example of Menu with Sub-menu using pure CSS

In this example I have tabs like Home, About Us, Services, News & Career. You can add or update tags as you want. This menu is supporting sub menu feature. Under About Us & Services I added some sub menu items for demo purpose.

Technically to design this horizontal menu I used UL element of HTML. Using pure CSS I am defining color & theme to the menu. For responsive I used CSS3 media queries. In media query I configured the menu max-width to 750px. 750px is nothing but the total width of my horizontal menu (including all tabs).

This menu is designed using pure CSS, so according to your requirement you can Configure this menu easily. You can change width, height, font style, font color or font size as you want. To update colors & theme you can update background for li & anchor elements. To present mouse over effect here I used CSS hover. To update hover related changes you need to update li:hover related classes.

Horizontal Navigation menu with sub-menu




Responsive horizontal menu using CSS


Our Menu


Home

About Us

Our Mission
Technology
Success Stories



Services

CMS
UI Designing
Logo Designing
WordPress
SEO Optimization


News
Career

Products

Off-page Optimization
Blog Writing
MyCMS
WordPress Blogs
Mobile Apps

CSS Source Code for Navigation menu

Benefits of Horizontal Navigation

1. Space Efficiency Horizontal menus occupy minimal vertical space, allowing more room for content. This is particularly useful for landing pages and blogs where screen real estate is valuable.

2. User-Friendly Design Users are accustomed to horizontal menus, as they mimic traditional reading patterns (left to right). This familiarity enhances usability and reduces cognitive load.

3. Mobile Responsiveness With proper design techniques, horizontal menus can adapt to smaller screens, often transforming into hamburger menus on mobile devices.

4. Aesthetic Appeal A well-designed horizontal menu contributes to a clean, professional layout, reinforcing brand identity and visual hierarchy.

Best Practices for Designing Horizontal Navigation

1. Keep It Simple Limit the number of menu items to avoid clutter. Seven or fewer links are ideal for optimal usability.

2. Prioritize Important Links Place high-priority pages (e.g., Home, About, Contact) on the far left, as users typically scan from left to right.

3. Use Clear Labels Avoid jargon—menu labels should be concise and descriptive (e.g., “Services” instead of “What We Offer”).

4. Ensure Responsiveness Test the menu on various devices to ensure it collapses or adjusts appropriately on smaller screens.

5. Highlight Active Pages Use visual cues (e.g., bold text, underlines) to indicate the current page, helping users orient themselves.

Common Horizontal Navigation Styles

Navigation menus are a critical component of web design, guiding users through a website efficiently. Among the various navigation styles, horizontal navigation remains one of the most popular due to its simplicity and ease of use. Several horizontal navigation styles serve different purposes, each with its own benefits and ideal use cases. The most common types include the Standard Menu, Mega Menu, Sticky Menu, and Centered Menu. Understanding these styles helps designers create intuitive and user-friendly interfaces.

1. Standard Menu

The Standard Menu consists of text-based links arranged in a single row, typically placed at the top of a webpage. This style is straightforward, making it ideal for websites with a limited number of pages or sections.

Key Features

– Space-Efficient: Fits neatly in the header without overwhelming the layout.
– Clear Hierarchy: Directly displays primary navigation options.

Best Use Cases Standard menus work well for small business websites, portfolios, and blogs where navigation requirements are minimal. They ensure quick access to essential pages without unnecessary complexity.

Limitations

– Not suitable for websites with numerous categories or subcategories.
– Limited space may require dropdowns for additional links, which can complicate usability.

Despite its simplicity, the Standard Menu remains a reliable choice for many websites due to its familiarity and ease of navigation.

2. Mega Menu

A Mega Menu is an expanded version of a dropdown menu, displaying multiple columns of navigation links and sometimes additional content like images or featured products. Unlike traditional dropdowns, Mega Menus provide a broader overview of a website’s structure, making them ideal for large e-commerce sites or content-heavy platforms.

Key Features

– Multi-Column Layout: Organizes links into categories and subcategories efficiently.
– Rich Media Support: Can include images, icons, or promotional banners.
– Enhanced Usability: Reduces clicks by displaying more options at once.

Best Use Cases Mega Menus are commonly used by online retailers, news websites, and enterprise platforms where multiple sections need quick access. They improve user experience by minimizing the need for excessive scrolling or page changes.

Limitations

– Requires ample space and careful design to avoid visual clutter.

When implemented effectively, Mega Menus enhance discoverability and streamline navigation for complex websites.

3. Sticky Menu

A Sticky Menu, also known as a fixed or floating menu, remains visible at the top of the screen even as users scroll down the page.

Key Features

– Persistent Visibility: Always available regardless of scrolling position.
– Improved Accessibility: Users don’t need to scroll back to the top to navigate.
– Space Optimization: Maintains navigation without taking up excessive screen real estate.

Best Use Cases Sticky Menus are beneficial for e-commerce sites, blogs, and single-page applications where continuous access to navigation improves the browsing experience.

Limitations

– Can obstruct content if not designed with adequate spacing.
– May not be necessary for short pages where scrolling is minimal.

For websites prioritizing user convenience, the Sticky Menu is an effective solution to keep navigation within reach.

4. Centered Menu

A Centered Menu aligns navigation links in the middle of the header rather than the traditional left or right orientation. This style is often used for minimalist or modern designs, creating a balanced and aesthetically pleasing layout.

Key Features

– Visual Appeal: Creates a symmetrical and clean look.
– Design Flexibility: Works well with logos placed on either side.
– Unique Branding: Differentiates from conventional navigation styles.

Best Use Cases Centered Menus are ideal for creative agencies, personal portfolios, and luxury brands looking for a distinctive and elegant navigation solution.

Limitations

– Limited space may restrict the number of links.
– Can appear awkward if too many items are forced into the center.

When executed properly, the Centered Menu adds a touch of sophistication to a website’s design while maintaining functionality.

Conclusion

Horizontal navigation menus remain a staple in web design due to their efficiency, familiarity, and adaptability. By following best practices in design and development, they can significantly enhance user experience while maintaining a sleek, professional appearance. Whether for a corporate site or a personal blog, a well-structured horizontal menu ensures seamless navigation and engagement.

The post Horizontal Navigation menu with sub-menu using pure CSS Source Code appeared first on OneStop Shop.

CSS3 Sprite images Example to reduce HTTP Requests

Nibedita Panda — Sat, 14 May 2016 07:40:02 +0000

CSS3 Sprite is neither a method nor an attribute in CSS. CSS Sprite is a simple trick to load multiple images with a single http request. This is the cause CSS Sprite helps to improve performance of a web application by reducing the loading time for several images. To implement CSS Sprite we need CSS attributes like Width, Height, Background, Position Left & Right.

Look at the example below. Here I have a single png file (demoImg.png) with 4 sub images. Sub images are cloud, clock, message & love symbols. Using CSS3 Sprite I am showing all these 4 sub images to each individual HTML image tags. To identify image tags I used id’s (#cloud, #clock, #message & #love) for each img tag. By setting image src=”trans.gif” I am loading an transparent image similar to the width & height of sub image. To show each image individually with respective image tag I am applying CSS attributes background, width & height to the image using id selector.

How CSS3 Sprite works?

Inside the id selector I am applying background (background: url(“demoImg.png”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);) for img tag. Look at this line of code here after scroll 0 0 is the position of background image. First 0 is indicating “Left” & the second one is “Top”. To display the first image “cloud”, I have left:0px & top:0px. While for the second image “clock” (background: url(“demoImg.png”) no-repeat scroll -194px 0 rgba(0, 0, 0, 0);) I have left:-194px & top:0px;. For each image selector url of the background is pointing to the same image demoImg.png. But by setting position I am showing each individual image independently. This trick is called CSS Sprite. Keep remember after positioning the required image from the total image file set the width & height similar to the width & height of image you are going to show in HTML image tag.

CSS3 Sprite images Example

To run the below example Copy this HTML code to an index.html file. Then save below 2 images (trans.gif & demoImg.png) to the same folder & Open the index.html.

Index.htm




CSS Sprite images Example

CSS3 Sprite demo app images to Download

trans.gif

demoImg.png

The post CSS3 Sprite images Example to reduce HTTP Requests appeared first on OneStop Shop.

How to Move a DIV from Left to Right using CSS3 Animation?

Nibedita Panda — Sat, 14 May 2016 07:38:45 +0000

Compare to Flash or JavaScript animation CSS3 animation render faster. Animation is a new feature introduced in CSS3. Performance wise CSS3 is more programmers friendly. In this session let us make you clear about the trick to use CSS animation.

In CSS3 2 major properties are “animation” & “@keyframes”. Refer to the below example I have a div with a class “animation”. To apply animation on this div I created a class animation. Inside the class I added CSS3 property animation: demoAnimation 5s;. Here demoAnimation is controlled by keyframes. Using @keyframes we need to define from & to properties. As in this example I am moving a div from left to right, I positioned the div to absolute and applying left property from 0 to 200px.

To support animation in all browser here I used animation property for IE & FireFox. To render the same in Google Chrome, Safari & Opera I used -webkit-animation. The similar I did for @keyframes.

CSS animation comes with some major properties like animation, @keyframes, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state & animation-timing-function.

Move a DIV from Left to Right Example




How to move a div from left to right?



This is a Div.

CSS3 Animation

CSS3 has revolutionized web design by introducing powerful animation capabilities that allow developers to create smooth, engaging, and interactive experiences without relying on JavaScript or Flash. With CSS3 animations, designers can bring elements to life through transitions, transforms, and keyframe-based animations, enhancing user engagement and visual appeal.

At its core, CSS3 animation includes three primary techniques: transitions, transforms, and keyframe animations. Each of these techniques serves its purpose, allowing designers to choose the most effective means of delivering their message.

Transitions

**Transitions** are the simplest form of CSS animation. They enable property changes in CSS to occur smoothly over a specified duration. For instance, if a user hovers over a button, a transition can make the button change color or size gradually rather than instantaneously. This subtle effect enhances interactivity, providing visual feedback that guides users as they navigate.

Transforms

**Transforms** take this a step further. They allow elements to be moved, scaled, rotated, or skewed without affecting the surrounding elements. For example, a designer can create a card that rotates slightly when a user hovers over it, drawing attention and creating an interactive feel. This type of animation is also hardware-accelerated, ensuring that the experience remains smooth even on devices with lower performance capabilities.

Understanding CSS3 Animation

CSS3 animations enable the gradual change of an element’s style from one state to another. Unlike CSS transitions, which are limited to simple property changes, animations provide greater control over intermediate steps using keyframes. This makes them ideal for complex, multi-step effects.

One of the most significant advantages of CSS3 animation is its efficiency. Animations created with CSS are often lighter than those utilizing JavaScript or Flash, leading to faster load times and improved user experience. Additionally, CSS animations are more accessible; they can be executed with just a few lines of code, making them highly usable for developers of all skill levels.

Another critical aspect of CSS3 animation is responsiveness. As web design increasingly shifts towards mobile-first approaches, it’s essential for animations to be functional and elegant across various devices. CSS3 is inherently responsive; designers can use media queries to modify animations based on screen size, ensuring a consistent experience for all users.

Key Components of CSS3 Animation

1. Keyframes – The foundation of CSS3 animation, keyframes define the styles at various points during the animation sequence. Using `@keyframes`, developers specify how an element should appear at specific intervals (e.g., 0%, 50%, 100%).

2. Animation Properties – CSS provides several properties to control animations: – `animation-name` – Specifies the keyframe rule to use. – `animation-duration` – Sets how long the animation lasts.

Conclusion

CSS3 animations offer a powerful, lightweight way to enhance web interactivity and aesthetics. By mastering keyframes, animation properties, and performance optimization, developers can create visually compelling experiences that captivate users. Whether for subtle micro-interactions or complex motion graphics, CSS3 animations remain an essential tool in modern web design.

The post How to Move a DIV from Left to Right using CSS3 Animation? appeared first on OneStop Shop.

Tricks to Draw CSS Triangle using DIV without Images

Biswabhusan Panda — Fri, 13 May 2016 19:10:40 +0000

As a cleaver UI developer you must need to know the Tricks how to use CSS in UI designing. CSS provides plenty of tricks to make our web development easier & faster. Recently during a Login page design I instructed to implement a triangle below the Login box header (As shown in the below image) using Div & CSS. The same can be done using an arrow image but the benefits of using CSS is to make the application lightweight & more programmer friendly. In place of image if we are using Div & CSS in feature if required the triangle can be easily update to any shape & size rather than generating a new arrow image. Also this technique of drawing a triangle is more compatible to control by programming. Look at the Code below here I am with an example of CSS Triangle. You can customize it as per your requirements.

As per the above requirement for Login UI I need a triangle with Up direction. But here in the below example to make your understanding clear, I did draw 4 triangles with 4 directions (Up Arrow Triangle, Down Arrow Triangle, Left Arrow Triangle & Right Arrow Triangle).

Tricks I used to draw triangle using Div & CSS are as below.

1. In HTML body Declare a Div with a CSS Class.

2. In the Class set width & height to zero for the Div.

3. If you are looking to draw an Up arrow triangle including width & height in your CSS class add borders (boder-left, border-right & border-bottom) except the border-top. I mean which is the direction for the triangle ignore that border settings.

4. Now we have three border settings except border-top. The opposite of border-top is border-bottom. For border-bottom declare border-width, border-style & border-color (10px solid #000000;). For other two border-left & border-right replace border-color with transparent (10px solid transparent;).

Code to draw Triangle




Tricks to draw CSS Triangle

The post Tricks to Draw CSS Triangle using DIV without Images appeared first on OneStop Shop.

Padding, Border and Margin properties from CSS Box Model

Nibedita Panda — Tue, 10 May 2016 17:37:42 +0000

CSS Box Model is a box around the HTML elements. This area is divided into 3 parts Padding, Border & Margin. Let us discuss about a HTML div with the content “This is a sample text.”. As shown in below figure, Padding is the nearest area to the div contents before border. Border is the boundary for your html elements. About margin it is area after border.

In web design, every element on a webpage needs to be defined clearly to ensure a smooth user experience. One fundamental aspect of this design is the use of borders. In CSS, the border property creates a delineation around HTML elements, enhancing aesthetics and usability. This article will explore the essential border properties in CSS and the additional features introduced with CSS3.

Padding

Padding has its 4 properties padding-top, padding-right, padding-bottom & padding-left. This can be used using following CSS syntax.

Padding is a CSS property that defines the space inside an element, effectively pushing the content away from the edges of the container. This space can be adjusted independently on all four sides of the element—top, right, bottom, and left—allowing for greater control over the look and feel of your design.

.box-model {
padding-top: 100px;
padding-right: 200px;
padding-bottom: 300px;
padding-left: 400px;
}

When designing for various screen sizes, it’s important to consider how padding will adapt. Using relative units such as percentages or `em` values instead of fixed units like pixels can provide a more responsive design. This way, padding will adjust according to the screen size, maintaining the intended layout across devices.

By declaring only padding it apply the same value for each of the above 4 properties.

.box-model {
padding: 100px;
}

You can also declare padding using the following CSS syntax. Here the sequence is top, right, bottom & left. I mean clock-wise.

.box-model { Padding: 100px 200px 300px 400px; }

Border

Borders are an essential aspect of web design, allowing designers to define spaces and enhance the visibility of elements. With the basic properties of CSS and the advanced features offered by CSS3, you can achieve intricate designs that not only look good but also improve user navigation and interaction. By mastering border properties, you’ll elevate your web design skills and produce visually stunning websites.

As I discussed above border is the boundary line to your HTML elements. It has several properties. With the advanced version of CSS3 there are some additional properties to border. Here with I am discussing the most common used border properties from CSS & CSS3.

Border Style

Border Style comes with none, dotted, dashed, solid, double, groove, ridge & outset values. The default value for border style is none. Commonly used border styles are solid, dotted & double. We can declare border style using the following CSS syntax.

.border-style {
    border-style: solid;
}

Border-width

It provides width to the border of HTML elements. The unit of border-width is pixel. Border width has 3 per-defined properties. Thin, medium & thick. We can declare CSS border width using the following Syntax.

.border-style {
    border-style: solid;
    border-width: thin;
}

.border-style {
    border-style: solid;
    border-width: 2px;
}

Remember if you only apply border-width to your class it will not show you the border. Because by default border-style is none.

Border Color

This property of border helps to update the border color. The following CSS syntax we used to achieve border colors.

.border-style {
    border-style: solid;
    border-width: 2px;
    border-color: red;
}

In CSS3 the additional border properties are border-radius, box-shadow & border-image. These properties works for IE 9 & the higher version of IE 9.

Margin

Like the padding margin has its 4 properties. Margin-top, margin-right, margin-bottom & margin-left. This can be used using the following CSS syntax.

In CSS, margin refers to the outer space surrounding an element. It effectively creates a buffer zone between different elements on a web page, allowing designers to adjust how close or far apart elements are from each other. This can enhance layout and organization, which is vital for providing a smooth user experience.

.box-model {
margin-top: 100px;
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;
}

Understanding how to effectively use margins is a fundamental skill for web designers and developers. By controlling the space around elements, you can create visually appealing layouts that improve readability and user interaction. Whether you’re crafting a simple blog or a complex web application, mastering the margin properties in CSS will undoubtedly elevate the quality of your design. Remember to experiment with different values and combinations to find what best suits your content and overall aesthetic!

By declaring only margin it apply the same value for each of the above 4 properties.

.box-model {
margin: 100px;
}

You can also declare margin using the following CSS syntax. Here the sequence is top, right, bottom & left. I mean clock-wise.

.box-model { margin: 100px 200px 300px 400px; }

Refer CSS Box Model from w3schools

The post Padding, Border and Margin properties from CSS Box Model appeared first on OneStop Shop.

Tricks behind CSS Position Property values Absolute and Fixed

Nibedita Panda — Tue, 10 May 2016 17:32:25 +0000

The time we are designing a HTML page for more complex layout we do refer position using CSS. Basically this is used to position the HTML elements. There are 6 possible values for position property in CSS. By default position is static. According to our requirements we can apply absolute, relative, fixed, initial & inherit values to the position property in CSS.

Cascading Style Sheets (CSS) is a fundamental technology used to control the layout and presentation of web pages. Among its many properties, the `position` property is one of the most powerful yet often misunderstood. It determines how an element is positioned within a document, influencing its relationship with other elements and the viewport. The three most commonly used values—`absolute`, `relative`, and `fixed`—each serve distinct purposes in web design. Understanding these values is crucial for creating flexible and responsive layouts.

Position: static;

This is the default value for position property. By declaring position static it will render the HTML elements in order to the document flow.

Position: absolute;

Position absolute is the most trickiest positioning value. Let us take example to understand position absolute. In below example I am using position absolute for a div inside the div which is position relative.

The ‘position: absolute’ value removes an element from the normal document flow, allowing it to be placed anywhere within its closest positioned ancestor (an element with a `position` value other than ‘static’).

Key Characteristics of ‘position: absolute’:

1. Breaks Document Flow – The element no longer affects the position of other elements, which may overlap or collapse into the space it once occupied.

2. Uses Nearest Positioned Parent – If a parent element has `relative`, `absolute`, or `fixed` positioning, the child element is positioned relative to that parent. Otherwise, it uses the document body.




Using Position Absolute





This is the div where we applied position absolute.

This will give us first div in 100px left & 100px from top position. The second div is applied with position absolute. In real-time the second div will appear 100px left & top from the parent div.

If i am declaring the parent div position static then child div with position absolute will show in 100px top & left from the top left corner of the browser window. Try with the example below.




Using Position Absolute





This is the div where we applied position absolute.

Position: fixed;

Using position fixed we can set position of our HTML element from the top left corner of browser window.

The ‘position: fixed’ value anchors an element to the viewport, meaning it remains in the same position even when the page is scrolled. This is commonly used for navigation bars, headers, or sticky elements.

Key Characteristics of ‘position: fixed’:

1. Viewport-Relative – The element is positioned relative to the browser window, not any parent container.

2. Stays in Place During Scrolling – Unlike ‘absolute’ positioning, a fixed element does not move when the user scrolls.

3. Ignores Parent Elements – Even if a parent has ‘relative’ or ‘absolute’ positioning, the fixed element remains tied to the viewport.

Position: relative;

Using position relative the position is relative to its normal position. If I am declaring top:100px it will take the element to 100px down.

The ‘position: relative’ value positions an element relative to its normal position in the document flow. Unlike ‘static’ positioning, which does not allow adjustments via properties like ‘top’, ‘right’, ‘bottom’, or ‘left’, ‘relative’ positioning enables fine-tuning an element’s placement.

Key Characteristics of ‘position: relative’:

1. Maintains Document Flow – The element remains in the normal flow, and surrounding elements behave as if it were in its original position.

2. Offset Adjustments – Using ‘top’, ‘bottom’, ‘left’, or ‘right’ shifts the element from its default position.

3. Reference Point – The element’s new position is calculated based on where it would have been in the normal flow.

Position: initial;

Initial reset the position of an element to default value.

Position: inherit;

Using position inherit we can inherits this property from parent element. You can access CSS position property using JavaScript. The syntax we need to use is object.style.position=”fixed”.

Common Mistakes

1. Overusing Absolute Positioning – Excessive use can lead to layout instability, especially on responsive designs.

2. Forgetting a Positioned Parent – An `absolute` element without a positioned ancestor may appear in unexpected locations.

3. Ignoring Z-Index – Positioned elements can overlap; using `z-index` ensures proper layering.

Conclusion

Understanding the CSS ‘position’ property is essential for mastering web layout design. By carefully selecting the appropriate positioning method and avoiding common pitfalls, designers can build more flexible and maintainable web pages. Whether aligning elements within a container or keeping a navigation bar visible at all times, mastering these techniques is a cornerstone of effective CSS development.

The post Tricks behind CSS Position Property values Absolute and Fixed appeared first on OneStop Shop.