Categories
CSS Web development

Pure CSS Train Animation

I’ve been thinking about travel a lot recently and yes, I miss it a lot. Are you missing travelling?

train vector image
Do you like this image? Check more images in the store.

I created simple Train Animation using the CSS basic shapes.

Demo:

*to see the animation on the website click here.

To create the CSS Train Animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="content">
    <div class="track"></div>
    <div class="train">
      <div class="front"></div>
      <div class="wheels">
        <div class="smallOne"></div>
        <div class="smallTwo"></div>
        <div class="smallThree"></div>
        <div class="smallFour"></div>
        <div class="smallFive"></div>
        <div class="smallSix"></div>
        <div class="big"></div>
      </div>
      <div class="cord"></div>
      <div class="coach"></div>
      <div class="coachTwo"></div>
      <div class="windows"></div>  
      <div id="up" class="steam"></div>
      <div id="up" class="steam2"></div>
    </div>
  </div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}

.content {
  position: relative;
  width: 400px;
  height: 400px; 
  overflow: hidden;
}

Create the track:

.track {
  position: absolute;
  width:400px;
  height:5px;
  background-color: #333;
  top:300px;
}

.track:before {
  content:"";
  position: absolute;
  width:10px;
  height:5px;
  background-color: #333;
  top:4px;
  box-shadow: 20px 0 #333, -20px 0 #333, -40px 0 #333, -60px 0 #333, -80px 0 #333, 40px 0 #333, 60px 0 #333, 80px 0 #333, 100px 0 #333, 120px 0 #333, 140px 0 #333, 160px 0 #333, 180px 0 #333, 200px 0 #333, 220px 0 #333, 240px 0 #333, 260px 0 #333, 280px 0 #333, 300px 0 #333, 320px 0 #333, 340px 0 #333, 360px 0 #333, 380px 0 #333, 400px 0 #333, 420px 0 #333, 440px 0 #333, -100px 0 #333, -120px 0 #333, -140px 0 #333, 460px 0 #333, 480px 0 #333;
  animation: move 1s linear infinite reverse;
}

Style the train:

.train:before {
  content:"";
  position: absolute;
  border:5px solid #333;
  background-color: #335c67;
  width:35px;
  height:60px;
  left:-45px;
  top:-35px;
}

.train:after {
  position: absolute;
  content:"";
  width: 100px;
  height:5px;
  border-radius:10px;
  border: 5px solid #333;
  background-color: #fff3b0;
  top:30px;
  left:-50px;
}

.front {
  position: absolute;
  border: 5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width:20px;
  height:30px;
  left:-37.5px;
  top:-20px;
}

.front:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:15px;
  height:5px;
  border-radius:10px;
  top: 25px;
  left:70px;
  box-shadow: 0px 10px #333, -50px -45px #333, -86px -45px #333, -22px -41px #333,-11px -41px #333;
}

.front:after {
  content:"";
  position: absolute;
  width:12px;
  height:20px;
  border: 5px solid #333;
  left:50px;
  top:-16px;
  background-color:#adb5bd;
}

.wheels {
  position: absolute;
  z-index:1;
}

.smallOne, .smallTwo, .smallThree, .smallFour, .smallFive, .smallSix {
  position: absolute;
  border: 5px solid #333;
  border-radius:50%;
  width: 15px;
  height:15px;
  top:40px;
  background-color: #e09f3e;
  box-shadow: inset 2px 2px white;
  z-index:2;
}

.smallOne {
  left: 30px;
  animation: spin .5s infinite linear;
}

.smallTwo {
  left:0;
  animation: spin .5s infinite linear;
}

.smallThree {
  left:-225px;
  animation: spin .5s infinite linear;
}

.smallFour {
  left:-190px;
  animation: spin .5s infinite linear;
}

.smallFive {
  left:-130px;
  animation: spin .5s infinite linear;
}

.smallSix {
  left:-95px;
  animation: spin .5s infinite linear;
}

.big {
  position: absolute;
  border: 5px solid #333;
  border-radius:50%;
  width:25px;
  height:25px;
  background-color: #e09f3e;
  box-shadow: inset 2px 2px white;
  top:30px;
  left:-40px;
  animation: spin .5s infinite linear;
}

.cord {
  position: absolute;
  width: 10px;
  height:5px;
  background-color: #333;
  top:35px;
  left:-59px;
  z-index:3;
}

.cord:before {
  content:"";
  position: absolute;
  height:5px;
  width: 70px;
  background-color: #333;
  top:15px;
  left:35px;
}

.cord:after {
  content:"";
  position: absolute;
  background-color: #333;
  border-radius:50%;
  width:15px;
  height:15px;
  top:5px;
  left:29px;
}

.coach {
  position: absolute;
  width:80px;
  height:60px;
  border:5px solid #333;
  background-color: #9e2a2b;
  left:-145px;
  top:-20px;
}

.coach:before {
  content:"";
  position: absolute;
  width: 10px;
  height:5px;
  background-color: #333;
  top:50px;
  left:-15px;
}

.coach:after {
  content:"";
  position: absolute;
  width:80px;
  height:60px;
  border:5px solid #333;
  background-color: #335c67;
  top:-5px;
  left:-100px;
}

.coachTwo {
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  left:-225px;
  top:-5px;
}

.coachTwo:before, .coachTwo:after {
  content:"";
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  top:-5px;
}

.coachTwo:before {
  left:30px;
}

.coachTwo:after {
  left:90px;
}

.windows {
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  left:-95px;
  top:-5px;
  z-index:6;
}

.windows:before {
  content:"";
  position: absolute;
  background-color: #333;
  height:5px;
  width: 95px;
  border-radius:10px;
  top:-20px;
  left:-153px;
  box-shadow: 95px 0px #333;
}

.windows:after {
  content:"";
  position: absolute;
  background-color: #333;
  height:5px;
  width:40px;
  top:51px;
  left:-125px;
  box-shadow: 95px 0 #333;
}

Add steam to the chimney:

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  top: -30px;
  left: 25.5px;
  z-index:-1;
}

.steam {
  animation: up 2.5s ease-out infinite; 
}

.steam2 {
  animation: up 1.7s ease-out infinite 1s; 
}

.steam2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #fff;
  border-radius:50%;
  top:20px;
}

Step3.

Add CSS Animation

To spin the wheels:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

For the track:

@keyframes move {  
  from { left: -100px; }
    to { left: 100px; }
}

and the steam:

@keyframes up {
  0%{
    transform: translateY(0) translateX(0) scale(0.5);
    opacity: 1;
  }
  100%{
    transform: translateY(-110px) translateX(-80px) scale(1.5);
    opacity: 0.2;
  }
}

To see the animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Windmill Animation

Pure CSS Windmill

Thinking about Rotterdam and the Tulip Festival I’ve created the simple windmill animation using only pure CSS:

Demo:

*to see the animation on the website click here.

To create the CSS Windmill Animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="windmill">
  <div class="line"></div>
  <div class="mill"></div>
  <div class="door"></div>
    <div class="fan">
      <div class="wingOne"></div>
      <div class="wingTwo"></div>
      <div class="wingThree"></div>
      <div class="wingFour"></div>
    </div>
    <div class="clouds"></div>
  </div>
</div>

Step2.

Add CSS

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

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

Create the container and style the windmill:

.container {
  position: relative;
}

.windmill {
  position: relative;
}

.line {
  position: absolute;
  width: 300px;
  height:5px;
  border-radius:10px;
  background-color: #333;
  left:-150px;
  top:100px;
  z-index:1;
}

.line:before {
  content:"";
  position: absolute;
  background-color: #6a994e;
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  top:-50px;
  left:50px;
  box-shadow: 100px 0 #a7c957;
}

.line:after {
  content:"";
  position: absolute;
  background-color: #6a994e;
  width: 50px;
  height: 25px;
  border-radius: 50px 50px 0 0;
  top:-25px;
  left:10px;
  box-shadow: 50px 0 #a7c957, 105px 0 #6a994e, 195px 0 #6a994e, 225px 0 #a7c957;
}

.mill {
  position: absolute;
  border-bottom: 130px solid #333;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  width: 80px;
  height:0;
  top:-28px;
  left:-60px;
  z-index:2;
}

.mill:before {
  position: absolute;
  content:"";
  border-bottom: 120px solid #ab3428;
  border-right: 22px solid transparent;
  border-left: 22px solid transparent;
  width: 70px;
  height:0;
  top:7px;
  left:-16.5px;
}

.mill:after {
  position: absolute;
  content:"";
  background-color: #333;
  width: 20px;
  height:5px;
  border-radius:10px;
  left:-2px;
  top:20px;
  box-shadow: 20px 40px #333, -10px 80px #333, 65px 5px #333, 70px 20px #333, 50px 80px #333, 55px 90px #333, 15px 95px #333, 10px 30px #333;
}

.door {
  position: absolute; 
  background-color: #621708;
  width:25px;
  height:40px;
  border-radius:30px 30px 0 0;
  border: 5px solid #333;
  box-shadow: inset 1px 7px rgba(0,0,0,0.2);
  top:55px;
  left:-10px;
  z-index:3;
}

.door:before {
  position: absolute;
  content:"";
  border-bottom: 65px solid #333;
  border-right: 65px solid transparent;
  border-left: 65px solid transparent;
  height:0;
  width:0;
  top:-145px;
  left:-55px;
}

.door:after {
  position: absolute;
  content:"";
  border-bottom: 50px solid #2d728f;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  height:0;
  width:0;
  top:-136px;
  left:-40px;
}

Add fan to the windmill:

.fan {
  position: absolute;
  background-color: #333;
  width:25px;
  height:25px;
  border-radius:50%;
  left:-7px;
  top:-55px;
  z-index:4;
  animation: spin 3s infinite linear;
}
.wingOne, .wingTwo, .wingThree, .wingFour {
  position: absolute;
  width:5px;
  border: 5px solid #333;
  height:25px;
  background-color: #e6e6ea;
  border-radius:10px;
}

.wingOne:before, .wingTwo:before, .wingThree:before, .wingFour:before {
  position: absolute;
  content:"";
  background-color: #3b8ea5;
  box-shadow: inset -5px 0 #f5ee9e;
  border: 5px solid #333;
  width:15px;
  height:65px;
  top:17px;
  left:-10px;
}

.wingOne {
  left:5px;
  top:15px;
}

.wingTwo {
  transform: rotate(90deg);
  top:-5px;
  left:-15px;
}

.wingThree {
  transform: rotate(-90deg);
  top:-5px;
  left:25px;
}

.wingFour {
  transform: rotate(180deg);
  top:-25px;
  left:5px;
}

and style clouds:

.clouds {
  position: absolute;
  width: 50px;
  height:15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index:-1;
  top:-120px;
  box-shadow: -120px 40px rgba(255, 255, 255, 0.5), 80px 80px rgba(255, 255, 255, 0.5);
  animation: move 10s linear infinite;
}

Step3.

Add CSS Animation

To spin the fan:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

and make the clouds move:

@keyframes move {
  0% {transform: translateX(0);}
  25% {transform: translateX(-30px);}
  50% {transform: translateX(0);}
  75% {transform: translateX(30px);}
  100% {transform: translateX(0);}
}

To see the CSS animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Glowing Gradient Border

CSS Glowing gradient border

Demo:

*to see the code on the website click here.

To create the CSS Glowing gradient border follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="gradient">
PURE CSS GLOWING GRADIENT BORDER
  </div>  
</div>

Step2.

Add CSS

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

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

Create the gradient border effect by using the :after or :before psuedo-classes (you can read more about CSS Pseudo-elements here):

.container {
  max-width: 250px;
  padding: 2px;
  position: relative;
  z-index:1;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 
  margin-right:25px;
  filter: brightness(120%);
}

.container:before {
  z-index:-1;
  position: absolute;
  content:"";
  width:230px;
  height:230px;
  left:10px;
  top:0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 
  filter: blur(20px);
  
}

.gradient {
  background-color: #0b090a;
  padding: 30px;
  color: white; 
  font-size: 35px;
  font-family: arial;
  text-align: center;
}

To see the live output of the code go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Gradient Border

CSS Gradient Border

Demo:

*to see the live output of the code on the website click here.

To create CSS Gradient border follow the steps below:

Step1.

Add HTML

If you want to create square/ rectangle border:

<div class="container">
  <div class="gradient">
Type your text here...
  </div>  
</div>

If you want to create rounded border:

<div class="container-radius">
  <div class="gradient-border-radius">
Type your text here...
  </div>  
</div>

Step2.

Add CSS

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

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

To read more how to create the gradient in CSS click here.

CSS for Square/ Rectangle border:

.container {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;   
  margin-right:25px;
}

.gradient {
  background-color: #fff;
  padding: 2rem;
  color: black;  
}

CSS for Rounded border:

.container-radius {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;
  border-radius: 7%;  
}

.gradient-border-radius {
  background-color: #fff;
  padding: 2rem;
  color: black;
  border-radius: 5%;  
}
CSS gradient borders
*to see the live output on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

Pure CSS Rainbow Text Animation

Pure CSS Rainbow text

The colours of the rainbow are Red, Orange, Yellow, Green, Blue, Indigo(*colour between blue and purple) and Violet.

I will use exactly these colours to create the rainbow text and the animation.

Demo:

*to see the code output on the website click here.

To create the CSS Rainbow Text Effect and the Animation follow the steps below:

Step1.

Add HTML

<div class="rainbowText">RAINBOW TEXT</div>

Step2.

Add CSS

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

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

Style your text.

Create the linear-gradient with 7 colours of the rainbow:

.rainbowText {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
  animation: move 35s linear infinite;
CSS Rainbow text effect

Step3.

Add CSS Animation

@keyframes move {
	to {
		background-position: 4500vh;
	}
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Multiple Borders

CSS Multiple Borders

We can achieve the CSS multiple borders effect by using the :after and :before psuedo-classes (you can read more about CSS Pseudo-elements here).

Example:

To achieve the CSS multiple borders effect:

Add HTML

<div class="border">Type your text here.</div>

Add CSS

.border {
   position: relative;
   z-index: 1;
   padding: 95px;
   border: 5px solid #231942;
   background-color: #5e548e;
}

.border::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #9f86c0;
   background: #be95c4;
}

.border::after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #e0b1cb;
   background: #fff;
}

*to see how the CSS multiple borders are looking on the website click here.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS HTML Web development

CSS Border Property

The CSS border properties define the width, line style, and colour of the border of a box.

CSS Border Property

Syntax:

border: border-width border-style border-color

where:

border-width – specifies the width of the border.

border-style – specifies style of the border.

border-color – specifies color of the border.

Example:

.square {
  border: 5px solid blue;
  height: 200px;
  width: 200px;
}

Output:

The border-style property specifies what kind of border to display:

dotted – defines a dotted border:

p.dotted {border-style: dotted;}

dashed – defines a dashed border:

p.dashed {border-style: dashed;}

solid – defines a solid border:

p.solid {border-style: solid;}

groove – defines a 3D grooved border. The effect depends on the border-color value:

p.groove {border-style: groove;}

ridge – defines a 3D ridged border. The effect depends on the border-color value:

p.ridge {border-style: ridge;}

inset – a 3D inset border. The effect depends on the border-color value:

p.inset {border-style: inset;}

outset – defines a 3D outset border. The effect depends on the border-color value:

p.outset {border-style: outset;}

rounded – the border-radius property is used to add rounded borders to an element:

p.round {border: 2px solid blue;border-radius: 12px;}

mixed – you can specify a different border for each side.

p.mix {border-style: dotted dashed solid double;}

multicolored-border – can have from one to four values (for the top border, right border, bottom border, and the left border).

p.color {border-style: solid;border-color: #ff0000;}

Enjoy coding!

Categories
CSS Web development

CSS Filter Property

Sometimes you don’t need to use the graphic programs to edit your images, you can do some editing work with CSS by applying CSS filters.

CSS Filter Property

The CSS filter property defines visual effects (like brightness, blur or opacity) to an HTML element.

Demo:

CSS Syntax:

filter: grayscale() | blur() | brightness() | contrast() | drop-shadow() | hue-rotate() | invert() | opacity() | saturate() | sepia() | none;

Note: The filters that use percentage values (i.e. 50%) and also decimal (i.e. 0.5).

filter: grayscale( )

Change the image/ HTML element to black and white(100%):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: grayscale(100%);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

Output:

CSS Fliter Grayscale
*grayscale(100%) CSS Filter

filter: blur( )

Apply a blur effect to the image/ HTML element:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: blur(2px);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS Fliter Blur
*blur(2px) CSS Filter

filter: brightness( )

Adjust the brightness of the image/ HTML element:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: brightness(200%);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS Fliters Brightness
*brightness(200%) CSS Filter

filter: contrast( )

Adjust the contrast of the image/ HTML element:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: contrast(200%);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS Filters - Contrast
*contrast(200%) CSS Filter

filter: drop-shadow( )

Apply a drop shadow effect to the image/ HTML element (the filter is similar to CSS box-shadow property:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: drop-shadow(4px 4px 5px gray);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS Filters drop-shadow
*drop-shadow(4px 4px 5px gray) CSS Filter

filter: hue-rotate( )

The hue-rotate( )function applies a hue rotation on the input image:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: hue-rotate(90deg);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
filter hue-rotate
*hue-rotate(90deg) CSS Filter

filter: invert( )

Invert the samples in the image/ HTML element:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: invert(100%);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS filters Invert
*invert(100%) CSS Filter

filter: opacity( )

Set the opacity level for the image/ HTML element (this filter is similar to the CSS opacity property):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: opacity(25%);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS filters -Opacity
*opacity(25%) CSS Filter

filter: saturate( )

Saturate the image/ HTML element:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: saturate(7);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS Filters - Saturate
*saturate(7) CSS Filter

filter: sepia( )

Convert the image/ HTML element to sepia:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: sepia(100%);
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS Filter -Sepia
*sepia(100%) CSS Filter

Using Multiple Filters

To use multiple filters, separate each filter with a space. Notice that the order is important.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
	img {
  filter: brightness(110%) drop-shadow(5px 5px 1px rgba(0,0,0,0.5));
}
	</style>
<body>
	<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
CSS Multiple Filters
*brightness(110%) drop-shadow(5px 5px 1px rgba(0,0,0,0.5)) CSS Filters

Enjoy coding!

Categories
CSS Web development

CSS Heart Shape & Heartbeat Animation

Last year I posted the tutorial Fast & easy CSS Valentine’s Day Animation (Heartbeat), were to create the heartbeat I used the .png file. Today I will show you how to create the heart shape and heartbeat animation using just pure CSS.

heartbeat
Do you like this gif? Check more gifs in the store.
*animation opened in the Firefox browser.
*to see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
      <div class="heart"></div>
  </div>

Step2.

Add CSS

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

body {
  background-color: #fae1dd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  
.container {
  position: relative;
  animation: .8s beat infinite;
}

Create the heart:

.heart {
  position: relative;
  background-color: red;
  display: inline-block;
  height: 60px;
  top:0;
  left:0;
  transform: rotate(-45deg);
  width:60px;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: red;
  border-radius:50%;
  height: 60px;
  width: 60px;
  position: absolute;
  width: 60px;
  }
  
.heart:before {
  top:-30px;
  left:0;}
  
.heart:after {
  left:30px;
  top:0;}

Step3.

Add CSS Animation

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS JQuery Web development

CSS Valentine’s Day Card

Hello! Valentine’s day is coming up – a day to celebrate love and friendship! To celebrate this day I created the CSS Valentine’s Day card 🙂 Do you have Valentine’s Day wishes for your love ones?

hearts envelope
Do you like this image? Check more images in the store.

If not yet, no problem! Follow the steps below and create beautiful Valentine’s Day card.

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

Step1.

Add HTML

Create the container, envelope and card:

<div class="container">  
<div class="valentines">
  <div class="envelope"></div>
  <div class="front"></div>
  <div class="card">
  <div class="text">Happy</br> Valentine's</br> Day!</div>
  <div class="heart"</div>
  </div>
  <div class="hearts">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
</div>
</div>
<div class="shadow"></div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}
.valentines {
  position: relative;
  top:50px;
  cursor: pointer;
  animation: up 3s linear infinite;
}

Style the envelope and the card:

.envelope {
  position: relative;
  width: 300px;
  height:200px;
  background-color: #f08080; 
}

.envelope:before {
  background-color: #f08080; 
  content:"";
  position: absolute;
  width: 212px;
  height: 212px;
  transform: rotate(45deg);
  top:-105px;
  left:44px;
  border-radius:30px 0 0 0;
}

.card {
  position: absolute;
  background-color: #eae2b7;
  width: 270px;
  height: 170px;
  top:5px;
  left:15px;
  box-shadow: -5px -5px 100px rgba(0,0,0,0.4); 
}

.card:before {
  content:"";
  position: absolute;
  border:3px solid #003049;
  border-style: dotted;
  width: 240px;
  heighT: 140px;
  left:12px;
  top:12px;
}

.text {
  position: absolute;
  font-family: 'Brush Script MT', cursive;
  font-size: 28px;
  text-align: center;
  line-height:25px;
  top:19px;
  left:85px;
  color: #003049;
}

.heart {
  background-color: #d62828;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 110px;
  left:105px;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: #d62828;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  top: -15px;
  left: 0;
}

.heart:after {
  left: 15px;
  top: 0;
}
.front {
  position: absolute;
  border-right: 180px solid #f4978e;
  border-top: 95px solid transparent;
  border-bottom: 100px solid transparent;
  left:120px;
  top:5px;
  width:0;
  height:0;
  z-index:10;
}

.front:before {
  position: absolute;
  content:"";
  border-left: 300px solid #f8ad9d;
  border-top: 195px solid transparent;
  left:-120px;
  top:-95px;
  width:0;
  height:0;
}
CSS Valentine's Day Card

Add the shadow:

.shadow {
  position: absolute;
  width: 330px;
  height: 25px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.3);
  top:265px;
  left:-15px;
  animation: scale 3s linear infinite;
  z-index:-1;
}

Step3.

Add CSS Animation:

To move the envelope up and down:

@keyframes up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

To scale the shadow:

@keyframes scale {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.85);
  }
}

Add some hearts to the envelope:

.hearts {
  position: absolute  
}

.one, .two, .three, .four, .five {
  background-color: red;
  display: inline-block;
  height: 10px;
  margin: 0 10px;
  position: relative;
  transform: rotate(-45deg);
  width: 10px;
  top:50px;
}

.one:before,
.one:after, .two:before, .two:after, .three:before, .three:after, .four:before, .four:after, .five:before, .five:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  width: 10px;
}

.one:before, .two:before, .three:before, .four:before, .five:before {
  top: -5px;
  left: 0;
}

.one:after, .two:after, .three:after, .four:after, .five:after {
  left: 5px;
  top: 0;
}
  
.one {
  left:10px;
  animation: heart 1s ease-out infinite; 
}

.two {
  left:30px;
  animation: heart 2s ease-out infinite; 
}

.three {
  left:50px;
  animation: heart 1.5s ease-out infinite;
}

.four {
  left:70px;
  animation: heart 2.3s ease-out infinite;
}

.five {
  left:90px;
  animation: heart 1.7s ease-out infinite;
}

@keyframes heart {
  0%{
    transform: translateY(0) rotate(-45deg) scale(0.3);
    opacity: 1;
  }
  100%{
    transform: translateY(-150px) rotate(-45deg) scale(1.3);
    opacity: 0.5;
  }
}

Step4.

Add jQuery

To change the position of the card on hover:

$(document).ready(function () {
    $('.container').mouseenter(function () {
        $('.card').stop().animate({
            top: '-90px'
        }, 'slow');
    }).mouseleave(function () {
        $('.card').stop().animate({
            top: 0
        }, 'slow');
    });
});

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!