Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles on Trending Technologies
Technical articles with clear explanations and examples
Selects all <p> elements inside <div> elements with CSS
Use the element element selector to select all elements inside another element.You can try to run the following code to implement element element selector,ExampleLive Demo div p { color: white; background-color: blue; } Demo Website Fruits Fruits are good for health. This is demo text.
Read MoreSelects all <div> elements and all <p> elements with CSS
To style, more than one element, use a comma. Separate each element with the comma to achieve this. You can try to run the following code to select and elements,ExampleLive Demo div, p { color: blue; background-color: orange; } Demo Website Fruits Fruits are good for health. This is demo text.
Read MoreArrow to the left of the tooltip with CSS
Use the right CSS property to add arrow to the right of the tooltip.You can try to run the following code to add a tooltip with arrow to the leftExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -5px; left: 110%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; margin-left: 50px; } .mytooltip .mytext:after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 6px; border-style: solid; border-color: transparent blue transparent transparent; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
Read MoreHow to select elements with an attribute value containing a specified word with CSS?
Use the [attribute ~= "value"] selector to select elements with an attribute value containing a specified word with CSS.You can try to run the following code to implement the [attribute ~= "value"] selector. Here, the word we are searching is “Tutorials”,ExampleLive Demo [alt ~= Tutorials] { border: 5px solid orange; border-radius: 5px; }
Read MoreCSS animation-direction property
Use the animation-direction property to set whether an animation should be played forwards, backward or in alternate cycles.You can try to run the following code to implement the animation-direction property:ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: reverse; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
Read MoreSet top tooltip with CSS
To set-top tooltip, use the bottom CSS property.You can try to run the following code to set-top tooltip to a text:ExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; bottom: 100%; left: 60%; margin-left: -90px; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; margin-top: 50px; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
Read MoreUsage of CSS transition-timing-function property
Use the transition-timing-function property to set the speed curve of the transition effect. The values you can set are ease, ease-in, ease-out, linear, etc.You can try to run the following code to set the speed curve of the transition effect with CSSExampleLive Demo div { width: 100px; height: 100px; background: red; transition: width 4s; } #effect1 { transition-timing-function: linear; } #effect2 { transition-timing-function: ease-in; } div:hover { width: 250px; } Transition Effect Hover over the div elements and see the transition effect and the speed: linear effect ease-in effect
Read MoreSet right tooltip with CSS
To set right tooltip, use the left CSS property.You can try to run the following code to set right tooltip to a textExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -6px; left: 100%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
Read MoreHow to position tooltips correctly with CSS
To position tooltips correctly, use the right, left, top and bottom properties.Let us see how to position tooltips on the right:ExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -6px; left: 100%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
Read MoreSpecify the speed curve of the animation with CSS
Use the animation-timing-function to set the speed curve of the Animation. You can try to run the following code to achieve thisExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} #demo2 {animation-timing-function: ease-in;} ease effect ease-in effect
Read More