Categories
CSS Web development

CSS Clip-path Property

CSS clip-path property

The CSS clip-path property allows you to clip an element to a basic shape or to an SVG source.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  clip-path: circle(50%);
}
</style>
</head>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="280" height="220" alt="cyclist">

</body>
</html>

Output:

cyclist

Syntax:

clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

clip-source – specifies a URL to an SVG element.

basic-shape – clips an element to a basic shape (circle, ellipse, polygon, or inset).

margin-box – uses the margin box as the reference box.

border-box – uses the border-box as the reference box.

padding-box – uses the padding-box as the reference box.

content-box – uses the content box as the reference box.

fill-box – uses the bounding box as the reference box.

stroke-box – uses the bounding box as the reference box.

view-box – uses the SVG viewport as a reference box.

none (default) – no clipping is done.

More examples:

<!DOCTYPE html>
<html>
<head>
<style>

.one img {
  clip-path: circle(50%);
}
.two img {
  clip-path: ellipse(60% 50%);
}
.three img {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.four img {
  clip-path: path("M150 0 L75 200 L225 200 Z");
}
</style>
</head>
<body>

<div class="one">
<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="200" height="200" alt="cyclist"></div>

<div class="two">
<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="200" height="200" alt="cyclist"></div>


<div class="three">
<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="200" height="200" alt="cyclist"></div>

<div class="four">
<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="200" height="200" alt="cyclist"></div>

</body>
</html>

Output:

Circle:

cyclist

Ellipse:

cyclist

Polygon:

cyclist

SVG Path:

cyclist

Enjoy coding!

Categories
CSS Web development

CSS Perspective Text Effect

CSS Perspective text

Demo:

*to see the CSS Perspective Text Effect on the website click here.

To create the CSS Perspective Text Effect follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="perspective-text"></div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fca311;
}

Style the text:

.perspective-text {
  position: relative;
  transform-style: preserve-3d;
  perspective:900px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.perspective-text:before, .perspective-text:after {
  position: absolute;
  content:"PERSPECTIVE";
  transition: .2s;
  font-size: 100px;
  font-family: arial;
  font-weight: 900;
  transform-style: preserve-3d;
  transform: rotateY(-55deg);
}
  
.perspective-text:after {  
  color: #14213d; 
  left:-355px;
}
.perspective-text:before {
  color: #e5e5e5;
  left:-348px;
}

Add the hover effect:

.perspective-text:hover:before {
  transform: rotateY(55deg);
  color: #14213d; 
}

.perspective-text:hover:after {
  transform: rotateY(55deg);
  color: #e5e5e5;
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS transform property ,transform-origin property & transform-style property

CSS transform origin property

CSS transform property

The CSS transform property relates a 2D or 3D transformation to an HTML element.

Syntax:

transform: none|transform-functions;

The CSS transform property allows you to rotate, move, skew and scale elements:

<!DOCTYPE html>
<html>
<head>
<style> 
.transform-property {
 display: flex;
 font-weight: bold;
    }
.rotate, .skew, .scale {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  margin:30px;  
}

.rotate{
  transform: rotate(30deg);
}

.skew {
  transform: rotate(30deg,30deg);     
    }
.scale {
        transform: scale(1.5,1.5);
    }
</style>
</head>
<body>
<div class="transform-property">
<div class="rotate">Rotate</div>
<div class="skew">Skew</div>
<div class="scale">Scale</div>
</div>
    
</body>
</html>

Output:

Rotate
Skew
Scale

CSS transform-origin property

Hover over the squares to see the effect:

20% 40%
Center
Top right

The CSS transform-origin property sets the position of transformed elements.

Syntax:

transform-origin: x-axis y-axis z-axis;

2D transformations can change the x-axis and y-axis of an element.

3D transformations can change the x-axis, y-axis, and z-axis of an element.

x-axis (values: left, center, right, length, %) – specifies where the view is placed at the x-axis.

y-axis (values: top, center, bottom, length, %) – specifies where the view is placed at the y-axis.

z-axis (values: length) – specifies where the view is placed at the z-axis.

Note: The default value of the transform-origin property is 50% 50% 0.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#square-1 {
  position: relative;
  height: 100px;
  width:  100px;
  margin: 100px;
  padding: 10px;
  border: 1px solid black;
}

#square-2 {
  width:100px;
  height:100px;
  position: absolute;
  background-color: #2a9d8f;
  transform: rotate(45deg);
  transform-origin: 10% 60%;
}
</style>
</head>
<body>

<div id="square-1">
  <div id="square-2"></div>
</div>

</body>
</html>

Output:

CSS transform-style property

The CSS transform-style property defines how nested elements are rendered in 3D space.

Syntax:

transform-style: flat|preserve-3d;

flat (default) – defines those child elements that will not preserve their 3D position.

preserve-3d – defines those child elements that will preserve their 3D position.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.transform-style-example {
        display: flex;
    }

.planet, .planet-transform-style {
        width:100px;
        height:100px;
        border-radius:50%;
        position: relative;
        background-color: #2a9d8f;
        margin: 30px;
    }
.ring, .ring-transform-style {
        position: absolute;
        width:120px;
        height:50px;
        top:25px;
        left:-15px;
        border: 5px solid #264653;
        border-radius:50%;
        transform: rotateX(45deg);
    }
.planet-transform-style {
        transform-style: preserve-3d;
    }
</style>
</head>
<body>
<div class="transform-style-example">
<div class="planet">
    <div class="ring"></div>
    </div>
    
<div class="planet-transform-style">
    <div class="ring-transform-style"></div>
    </div>
    </div>
</body>
</html>

Output:

The default position on the left. Elements preserve their 3D position on the right:

Enjoy coding!

Categories
CSS Web development

CSS Pseudo-classes

CSS pseudo-classes

The CSS pseudo-class is used to define a special state of an HTML element.

Syntax:

selector:pseudo-class {
  property: value;
}

You can use CSS pseudo-classes to display links differently. To style the links depending on their state use the following pseudo-classes:

a:link – selects the unvisited links.

a:visited – selects the visited links.

a:hover – selects links on mouseover.

a:active – selects the active links (a link the moment it is clicked)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: #2a9d8f;
}

a:visited {
  color: #264653;
}

a:hover {
  color: #e76f51;
}

a:active {
  color: #e9c46a;
}
</style>
</head>
<body>

<p><a href="https://lenadesign.org/" target="_blank">This is a link.</a></p>

</body>
</html>

Output:

You can you the CSS pseudo-classes to match elements in a specific order:

p:empty – selects every <p> element that has no children.

p:first-child – selects every <p> elements that is the first element (child) of its container (parent).

p:first-of-type – selects every <p> element that is the first
element of its container (parent).

:not(p) – selects every element that is not a <p> element.

p:nth-child(2) – selects every <p> element that is the second element (child) of its container (parent).

p:nth-last-child(2) – selects every <p> element that is the second element(child) of its container (parent), counting from the last <p>
element (child).

p:nth-last-of-type(2) – selects every <p> element that is the second
<p> element of its container (parent), counting from the last <p>
element (child).

p:nth-of-type(2) – selects every <p> element that is the second
<p> element of its container (parent).

p:only-of-type – selects every <p> element that is the only
<p> element of its container (parent).

p:only-child – selects every <p> element that is the only element (child) of its container (parent).

Example:

<!doctype html>
<html>
<head>
<style>
.example-1 p:first-of-type {
        color: #2a9d8f;
    }
</style>
</head>

<body>
<div class="example-1">
 <h4>Example:</h4>
 <p>This is the first paragraph.</p>
 <p>This is the second paragraph.</p>
 <p>This is the third paragraph.</p>
</div>
</body>
</html>

Output:

Example:

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.


You can you the CSS pseudo-classes to match the form elements:

input:checked – selects every checked <input> element.

input:disabled – selects every disabled <input> element.

input:enabled – selects every enabled <input> element.

input:focus – selects the <input> element that has focus.

input:in-range – selects <input> elements according defined range.

input:invalid – selects every <input> element with an invalid value.

input:optional – selects every <input> element with no “required” attribute.

input:out-of-range – selects every <input> element with a value outside a defined range.

input:read-only – selects every <input> element with a “read-only” attribute defined.

input:read-write – Select every <input> element with no “read-only” attribute.

input:required – Selects every <input> element with a “required” attribute defined.

input:valid – selects every <input> element with a valid value.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
option:checked {
  height: 150px;
  width: 150px;
}
</style>
</head>
<body>

<select>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="jQ">jQuery</option>
</select>

</body>
</html>

Output:

The CSS :lang pseudo-class allows to specify the special rules for different languages:

Example:

Select and style every <p> element with a lang attribute value equal to “es” (Spanish):

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(es) { 
  color: #e76f51;
  font-weight: bold;
}
</style>
</head>
<body>

<p>Hello from Spain!.</p>
<p lang="es">Holla Todos!</p>

</body>
</html>

Output:

Hello from Spain!.

Holla Todos!


Note: The lang attribute value is most often a two-letter language code, like lang=”es” (for Spanish), lang=”it” (for Italian), lang=”fr” (for French), or two language codes combined, like lang=”fr-ca” (for Canadian French).

The CSS :root pseudo-class matches the document’s root element (<html> element):

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
:root {
  background-color: #2a9d8f;
  padding: 20px;
}

body {
  background-color: #e9c46a;
  padding: 20px;
}
</style>
</head>
<body>

<div class="example">
<h4>This is a heading.</h4>
</div>
</body>
</html>

Output:

The CSS :target pseudo-class can be used to style the currently active target element:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
:target {
  border: 2px solid #2a9d8f;
  background-color: #e9c46a;
}
</style>
</head>
<body>

<div class="example">
<p><a href="#">Go to Content 1</a></p>
<p><a href="#">Go to Content 2</a></p>

<p id="news1"><b>Content 1...</b></p>
<p id="news2"><b>Content 2...</b></p>
</div>
</body>
</html>

Output:

Go to Content 1

Go to Content 2

Content 1…

Content 2…

Enjoy coding!

Categories
CSS Web development

CSS :optional & :required Selectors

CSS :optional and :required selectors

CSS :optional selector

The CSS :optional selector matches form elements that are optional.

Syntax:

:optional {
  CSS declarations;
} 

CSS :required selector

The CSS :required selector matches form elements that are required.

Syntax:

:required {
  CSS declarations;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:optional {
  background-color: #e9c46a;
}
    
input:required {
  background-color: #f4a261;
}
</style>
</head>
<body>

<p>An optional input element:<br><input></p>

<p>A required input element:<br><input required></p>


</body>
</html>

Output:

An optional input element:

A required input element:

Note: The CSS :optional and :required selectors only applies to the form elements like <input>, <select>, and <textarea>.

Enjoy coding!

Categories
CSS Web development

CSS :focus & :focus-within Selectors

CSS :focus and :focus-within selectors

CSS :focus selector

The CSS :focus selector is used to matching the element that has focus.

Syntax:

:focus {
  CSS declarations;
} 

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: #2a9d8f;
}
</style>
</head>
<body>

<p>Click inside the text fields to change the background to green:</p>

<form>
  Name: <input type="text" name="name"><br>
  Surname: <input type="text" name="surname">
</form>

</body>
</html>

Output:

Click inside the text fields to change the background to green:

Name:
Surname:

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 150px; 
  transition: width .35s;
}
input[type=text]:focus {
  width: 250px;
  background-color: #e9c46a;
}
</style>
</head>
<body>

Example: <input type="text" name="search">

</body>
</html>

Output:

Example:

CSS :focus-within selector

The CSS :focus-within selector matches an element if that element contains any children that have :focus.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

form {
  border: 2px solid #333;
  padding: 25px;
  transition: background 0.35s;
  width:30%;
  text-align: center;
}
form:focus-within {
  background-color: #e9c46a;
}
</style>
</head>
<body>

<form>
  <label for="name">First name</label>
  <input type="text" name="name" />
  </br>
   <label for="surname">Last name</label>
  <input type="text" name="surname" />
</form>

</body>
</html>

Output:


Enjoy coding!

Categories
CSS Web development

CSS :read-write & :read-only Selectors

CSS :read-write and :read-only Selectors

CSS :read-write selector

The CSS :read-write selector matches form elements that are “readable” and “write-able”.

Form elements with no “read-only” attribute and non “disabled” attribute are specified as “read-” and “write-able”.

Syntax:

:read-write {
  CSS declarations;
}

CSS :read-only selector

The CSS :read-only selector matches elements that are “read-only”.

Form elements with a “read-only” attribute are specified as “read-only” (You can not input any new data).

Syntax:

:read-only {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:read-write {
  background-color: #e9c46a;
}
    
input:read-only {
  background-color: #f4a261;
}
</style>
</head>
<body>

<p>:read-write selector:<br><input value="text"></p>

<p>:read-only selector:<br><input readonly value="text"></p>

</body>
</html>

Output:

:read-write selector:

:read-only selector:


Enjoy coding!

Categories
CSS Web development

CSS :checked Selector

CSS :checked selector

The CSS :checked selector selects all checked elements like radio buttons, checkboxes, and <option> element.

Example1:

Changing the width and height for every checked element (for radio buttons, checkboxes):

<!DOCTYPE html>
<html>
<head>
<style> 
input:checked {
  height: 45px;
  width: 45px;
}
</style>
</head>
<body>

<form action="">
  <input type="radio" checked="checked" value="black" name="colours">Black<br>
  <input type="radio" value="white" name="colours">White<br>
  <input type="checkbox" checked="checked" value="dog"> I have a dog.<br>
  <input type="checkbox" value="cat"> I have a cat. 
</form>

</body>
</html>

Output:

Black
White
I have a dog.
I have a cat.


Example2:

Changing the width and height for every checked element (for the <option> element):

<!DOCTYPE html>
<html>
<head>
<style> 
option:checked {
  height: 150px;
  width: 150px;
}
</style>
</head>
<body>

<select>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="jQ">jQuery</option>
</select>

</body>
</html>

Output:

Enjoy coding!

Categories
CSS Web development

CSS :in-range & :out-of-range Selectors

CSS :in-range and :out-of-range selectors

CSS :in-range selector

The CSS :in-range selector matches every element with a value that is within a defined range.

Syntax:

 :in-range {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
  border: 3px solid #2a9d8f;
}
</style>
</head>
<body>

<input type="number" min="5" max="10" value="7">

<p>Type a number out of range (less than 5 or higher than 10), to see the styling disappear.</p>

</body>
</html>

Output:

Type a number out of range (less than 5 or higher than 10), to see the styling disappear.

CSS :out-of-range selector

The CSS :out-of-range selector matches every element with a value that is outside a defined range.

Syntax:

:out-of-range {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:out-of-range {
  border: 3px solid #e76f51;
}
</style>
</head>
<body>

<input type="number" min="5" max="10" value="17">

<p>Type a number within the given range (between 5 and 10), to see the styling disappear.</p>

</body>
</html>

Output:

Type a number within the given range (between 5 and 10), to see the styling disappear.

Note: The CSS :in-range and :out-of-range selectors only work for input elements with min/ max attributes.

Enjoy coding!

Categories
CSS Web development

CSS :valid & :invalid Selectors

CSS :valid and :invalid selectors

CSS :valid selector

The CSS :valid selector defines form element with a value that validates according to the element’s settings.

Syntax:

:valid {
  CSS declarations;
} 

CSS :invalid selector

The CSS :invalid selector defines form elements with a value that does not validate according to the element’s settings.

Syntax:

 :invalid {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:valid {
  background-color: #e9c46a;
}
    
input:invalid {
  border: 2px solid #e76f51;
}
</style>
</head>
<body>

<h4>:valid selector:</h4>

<input type="email" value="example@example.com">
    
<p>Try to type a not valid e-mail address, to see the styling disappear.</p>
</br>
    
<h4>:invalid selector:</h4>
<input type="email" value="exampleEmail">

<p>Try to type a valid e-mail address, to see the styling disappear.</p>


</body>
</html>

Output:

:valid selector:

Try to type a not valid e-mail address, to see the styling disappear.


:invalid selector:

Try to type a valid e-mail address, to see the styling disappear.

>

Note: The CSS :valid and :invalid selectors only work for form elements such as input elements.

Enjoy coding!