Seetha has Published 110 Answers

Select every <p> element that is the second <p> element of its parent, counting from the last child

seetha
Published on 09-May-2018 07:11:18
Use the CSS :nth-last-of-type(n) selector to select every <p> element that is the second <p> element of its parent, counting from the last child.ExampleYou can try to run the following code to implement the :nth-last-of-type(n) selector:Live Demo<!DOCTYPE html> <html>    <head>       <style>          p:nth-last-of-type(2) ... Read More

Y-axis 3D transform with CSS3

seetha
Published on 08-May-2018 14:17:04
You can try to run the following code to implement Y-axis 3D transform with CSS3:ExampleLive Demo<html>    <head>       <style>          div {             width: 200px;             height: 100px;             ... Read More

Role of CSS :enabled Selector

seetha
Published on 08-May-2018 13:27:44
Use the CSS :enabled selector to style every enabled <input> element. You can try to run the following code to implement the :enabled selector −ExampleLive Demo<!DOCTYPE html> <html>    <head>       <style>          input:enabled {             background: blue;       ... Read More

CSS overflow: auto

seetha
Published on 08-May-2018 11:41:32
The CSS overflow: auto, adds a scrollbar only when it's needed, unlike overflow:scroll. You can try to run the following code to implement CSS overflow: auto property:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <style>          div {             background-color: orange;   ... Read More

Set the width of the left border using CSS

seetha
Published on 08-May-2018 08:37:24
To set the width of the left border, use the border-left-width property in CSS. You can try to run the following code to implement the border-left-width property −ExampleLive Demo<!DOCTYPE html> <html>    <head>       <style>          p {             border-style: ... Read More

Rotate transform the element by using z-axis with CSS3

seetha
Published on 08-May-2018 07:45:08
Use the rotateZ(angle) method to rotate transform the element by using z-axis with CSS3 −ExampleLive Demo<html>    <head>       <style>          div {             width: 200px;             height: 100px;             ... Read More

Transform the element along with y-axis using CSS

seetha
Published on 02-May-2018 12:28:09
Used to translateY(n) method to transform the element along with y-axis.Let us see the syntax:translateY(n)Here, n is a length representing the abscissa of the translating vector.ExampleLet us see an example −div {    width: 50px;    height: 50px;    background-color: black; } .trans {    transform: translateY(20px);    background-color: orange; ... Read More

CSS3 Diagonal Gradient

seetha
Published on 02-May-2018 10:49:28
Diagonal starts at top left and right button. You can try to run the following code to implement diagonal gradients in CSS3 −Live Demo<html>    <head>       <style>          #grad1 {             height: 100px;             ... Read More

Additional color properties provided by CSS3

seetha
Published on 02-May-2018 09:27:38
CSS3 has additional color properties as follows −RGBA colorsHSL colorsHSLA colorsLet us see what are HSL colors:HSL stands for hue, saturation, lightness. Here, Huge is a degree of the color wheel, saturation and lightness are percentage values between 0 to 100%.A sample syntax of HSL as shown below:#g1 {background-color: hsl(120, 100%, ... Read More

CSS border-image property

seetha
Published on 02-May-2018 06:53:58
CSS border-image property is used to add image border to some elements. You can try to run the following code to implement the border-image property −ExampleLive Demo<html>    <head>       <style>          #borderimg1 {             border: 15px solid transparent;   ... Read More
Advertisements