Categories
CSS HTML Web development

How to create a custom checkbox and radio button with CSS?

CSS Custom Checkbox

Demo:

*to see the CSS Custom Checkbox demo on the website click here.

CUSTOM CHECKBOX

Step1.

Add HTML

<h3>Custom Checkbox:</h3>
<label class="customContainer">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="customContainer">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="customContainer">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

Step2.

Add CSS

.customContainer {
    display: block;
    position: relative;
    color: #333;
    padding-left:40px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 25px;
    user-select: none; 
}

.customContainer input {
  	position: absolute;
	  opacity: 0;
    cursor: pointer;}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #ffe8d6;
}

.customContainer:hover input ~ .checkmark {
    background-color: #b7b7a4;
}

.customContainer input:checked ~ .checkmark {
    background-color: #6b705c;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.customContainer input:checked ~ .checkmark:after {
    display: block;
}

.customContainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

Output:

Custom Checkboxes

CUSTOM RADIO BUTTON

Step1.

Add HTML

<h3>Custom Radio Button:</h3>
<label class="customContainer">One
  <input type="radio" checked="checked" name="radio">
  <span class="radioButton"></span>
</label>
<label class="customContainer">Two
  <input type="radio" name="radio">
  <span class="radioButton"></span>
</label>
<label class="customContainer">Three
  <input type="radio" name="radio">
  <span class="radioButton"></span>
</label>

Step2.

Add CSS

.customContainer {
    display: block;
    position: relative;
    color: #333;
    padding-left:40px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 25px;
    user-select: none; 
}

.customContainer input {
  	position: absolute;
	  opacity: 0;
    cursor: pointer;}

.radioButton {
  position: absolute;
  background-color: #ffe8d6;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}

.customContainer:hover input ~ .radioButton{
  background-color: #b7b7a4;
}

.customContainer input:checked ~ .radioButton{
  background-color: #6b705c;
}

.radioButton:after {
  content: "";
  position: absolute;
  display: none;
}

.customContainer input:checked ~ .radioButton:after {
  display: block;
}

.customContainer .radioButton:after {
  background-color: #fff;
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

Output:

Custom Radio Button:

Enjoy coding!

Categories
HTML Web development

HTML Checkbox

The checkbox is shown as a square box that is ticked (checked) when activated. Using checkboxes is a good option when you want to give your website visitors the option to choose one or more options of a limited number of choices.

HTML Checkbox

The <input type="checkbox"> defines a checkbox.

Syntax:

<input type="checkbox">

Example:

<!DOCTYPE html>
<html>
<body>
<div><h3>How many cats do you have?</h3><br>
  <input type="checkbox" id="one" name="one" value="one">
  <label for="one"> One</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> Two</label><br>
  <input type="checkbox" id="two" name="three" value="three">
  <label for="three"> Three</label><br>
  <input type="checkbox" id="other" name="other" value="other">
  <label for="other"> Other</label><br>
 
</div>
</body>
</html>

Note: Always add the <label> tag.

Output:

How many cats do you have?






Click here to see how to stye HTML Checkbox using CSS.

Enjoy coding!

Categories
CSS Web development

CSS Train Front Animation/ Loader

CSS Train Front Animation

Demo:

*to see the animation on the website 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="track"></div>
  <div class="train"></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;
}

.container {
  position: relative;
}

Add the track:

.track {
  position: relative;
  overflow:hidden;
  width:50px;
  height:100px;
  border-left: 3px solid #333;
  transform: skew(-10deg) rotateX(45deg);
}

.track:before {
  content:"";
  position: absolute;
  height:3px;
  width:50px;
  background-color: #333;
  top:90px;
  box-shadow: 0 0 #333, 0 -10px #333, 0 -20px #333, 0 -30px #333, 0 -40px #333, 0 -50px #333, 0 -50px #333, 0 -60px #333,0 -70px #333, 0 -80px #333, 0 -90px #333, 0 -100px #333, 0 -110px #333, 0 -120px #333, 0 -130px #333, 0 -140px #333;
  animation: track 1s linear infinite;
}
.track:after {
  content:"";
  position: absolute;
  transform: rotate(-15deg);
  width:50px;
  height: 120px;
  background-color: #fff;
  border-left: 3px solid #333;
  left:30px;
  top:-10px;
}

Style the train:

.train {
  position: absolute;
  width: 60px;
  height:60px;
  background-color: #333;
  border-radius:15px;
  top:0;
  left:-13px;
  transform-origin: bottom;
  animation: rotate 1s linear infinite;
}

.train:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width:20px;
  height:15px;
  left:9px;
  top:15px;
  box-shadow: 22px 0 #ced4da;
}

.train:after {
  content:"";
  position: absolute;
  background-color: #ced4da;
  border-radius:50%;
  height:10px;
  width:10px;
  top:45px;
  left:10px;
  box-shadow: 30px 0px #ced4da;
}

Step3.

Add CSS Animation

@keyframes track {
  0% {transform: translateY(70px) rotateX(45deg);}
  100% {transform: translateY(0px) rotateX(45deg);}
}

@keyframes rotate {
  0% {transform: rotate(0);}
  25% {transform: rotate(2deg);}
  50% {transform: rotate(0);}
  75% {transform: rotate(-2deg);}
  100% {transform: rotate(0);}
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Folded Birthday Card

CSS Folded Greeting Card

Demo:

*to see the CSS Folded Card on the website click here.

Step1.

Add HTML

Front side of the card:

<div class="birthdayCard">
<div class="cardFront"><h3 class="happy">HAPPY BIRTHDAY!</h3>
<div class="balloons">
  <div class="balloonOne"></div>
  <div class="balloonTwo"></div>
  <div class="balloonThree"></div>
  <div class="balloonFour"></div>
</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: #073b4c;
}

.birthdayCard {
  position: relative;
  width: 250px;
  height:350px;
  cursor: pointer;
  transform-style: preserve-3d;
	transform: perspective(2500px);
  transition: 1s;
}

Style front side of the card:

.cardFront {
  position: relative;
  background-color: #fff;
  width: 250px;
  height:350px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 30px 0 50px rgba(0,0,0,0.4);
  transition: .6s;
}

.happy {
  font-family: Tahoma, sans-serif;
  text-align: center;
  margin:30px; 
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  transition: .1s;
}

.balloons {
  position: absolute;
}

.balloonOne, .balloonTwo, .balloonThree, .balloonFour {
  position: absolute;
  width: 85px;
  height:95px;
  border-radius:50%;
}

.balloonOne {
  background-color: rgb(239, 71, 111, 0.7);
  left:-10px;
  top:50px;
}

.balloonTwo {
  background-color: rgb(6, 214, 160, 0.7);
  left:50px;
  top:20px;
}

.balloonThree {
  background-color: rgb(255, 209, 102, 0.7);
  left:110px;
  top:50px;
}

.balloonFour {
  background-color: rgb(17, 138, 178, 0.7);
  left:170px;
  top:20px;
}

.balloonOne:before, .balloonTwo:before, .balloonThree:before, .balloonFour:before {
  content:"";
  position: absolute;
  width:1px;
  height: 155px;
  background-color: #ffd166;
  top:95px;
  left:43px;
}

.balloonOne:after, .balloonTwo:after, .balloonThree:after, .balloonFour:after {
  content:"";
  position: absolute;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  top:94px;
  left:37px;
}

.balloonOne:after {
  border-bottom: 10px solid #ef476f;
}

.balloonTwo:after {
  border-bottom: 10px solid #06d6a0;
}

.balloonThree:after {
  border-bottom: 10px solid #ffd166;
}

.balloonFour:after {
  border-bottom: 10px solid #118ab2;
}

Step3.

Add HTML

To create the card inside:

 <div class="cardInside">
    <h3 class="back">HAPPY BIRTHDAY!</h3>
    <p>Dear Friend,</p>
    <p>Happy birthday!! I hope your day is filled with lots of love and laughter! May all of your birthday wishes come true.</p>
    <p class="name">xxx</p>
  </div>
</div>

Step4.

Add CSS

Style the card inside:

.cardInside {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height:350px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

p {
  font-family: 'Brush Script MT', cursive;
  margin: 40px;
  color: #333;
}

.name {
  position: absolute;
  left:150px;
  top:200px;
  color: #333;
}

.back {
  font-family: Tahoma, sans-serif;
  color: #333;
  text-align: center;
  margin:30px; 
  outline-color:#333;
  outline-style: dotted;
}

Step5.

Add CSS Transitions

.birthdayCard:hover {
	transform: perspective(2500px) rotate(5deg);
	box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 0 10px 100px rgba(0,0,0,0.5);
}

.birthdayCard:hover .cardFront {
  transform: rotateY(-160deg); 
}

.birthdayCard:hover .happy {
  visibility:hidden; 
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Long Shadow Text Effect

CSS Long Shadow Text Effect

Demo:

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

Step1.

Add HTML

<div class="container">
  <div class="text">LONG SHADOW</div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
  width:400px;
  height:100px;
  overflow: hidden;
  background-color: #00b4d8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px rgba(0,0,0,0.3);
}

Style the text. To create the long shadow effect we will use the CSS text-shadow property.

.text {
  font-family: arial black;
  color: white;
  font-size:40px;
  text-shadow: 0px 0px #0096c7,1px 1px #0096c7,2px 2px #0096c7,3px 3px #0096c7, 4px 4px #0096c7,5px 5px #0096c7,6px 6px #0096c7,7px 7px #0096c7,8px 8px #0096c7,9px 9px #0096c7,10px 10px #0096c7,11px 11px #0096c7,12px 12px #0096c7,13px 13px #0096c7,14px 14px #0096c7,15px 15px #0096c7,16px 16px #0096c7, 17px 17px #0096c7,18px 18px #0096c7,19px 19px #0096c7,20px 20px #0096c7,21px 21px #0096c7,22px 22px #0096c7,23px 23px #0096c7,24px 24px #0096c7,25px 25px #0096c7,26px 26px #0096c7,27px 27px #0096c7,28px 28px #0096c7, 29px 29px #0096c7,30px 30px #0096c7,31px 31px #0096c7,32px 32px #0096c7,33px 33px #0096c7,34px 34px #0096c7,35px 35px #0096c7,36px 36px #0096c7,37px 37px #0096c7,38px 38px #0096c7,39px 39px #0096c7,40px 40px #0096c7, 41px 41px #0096c7,42px 42px #0096c7,43px 43px #0096c7, 44px 44px #0096c7,45px 45px #0096c7,46px 46px #0096c7,47px 47px #0096c7,48px 48px #0096c7,49px 49px #0096c7,50px 50px #0096c7, 51px 51px #0096c7,52px 52px #0096c7,53px 53px #0096c7,54px 54px #0096c7,55px 55px #0096c7, 56px 56px #0096c7;
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Car Animation

CSS Car Animation

Demo:

*to see the animation on the website click here.

To create the CSS Car Animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="carAnimation">
    <div class="road"></div>
    <div class="car">
      <div class="colour"></div>
      <div class="windows"></div>
      <div class="leftWheel">
        <div class="wheel"></div>
      </div>
      <div class="rightWheel">
        <div class="wheel"></div>
      </div>
    </div>
    <div class="clouds"></div>
  </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;
}

.container {
  position: relative;
}

.carAnimation {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background-color: #83c5be;
  border-radius:50%;
}

Create the road:

.road {
  position: absolute;
  background-color: #333;
  border-radius:20px;
  height:5px;
  width:220px;
  top:220px;
  left:40px;
  overflow:hidden;
}

.road:before {
  content:"";
  position: absolute;
  background-color: #83c5be;
  width:30px;
  height:5px;
  border-radius:5px; 
  animation: move 1s linear infinite reverse;
}
.road:after {
  content:"";
  position: absolute;
  width:15px;
  height:5px;
  background-color: #333;
  border-radius:5px; 
  box-shadow: 27px 0 #333;
  animation: move 1s linear infinite reverse;
}

Style the car:

.car {
  position: absolute;
  height:0;
  width:90px;
  border-right: 25px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 70px solid #333;
  z-index:2;
  top:140px;
  left:75px;  
}

.car:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:70px;
  height:40px;
  left:60px;
  top:30px;
}

.car:after {
  content:"";
  position: absolute; 
  background-color: #333;
  width:10px;
  height:35px;
  border-radius:10px;
  left:-22px;
  top:20px;
  transform: rotate(16deg);
}

.colour {
  position: absolute;
  height:0;
  width:80px;
  border-right: 20px solid transparent;
  border-left: 17.5px solid transparent;
  border-bottom: 60px solid #e5383b;
  top:5px;
  left:-12px;
}

.colour:before {
  content:"";
  position: absolute; 
  background-color: #e5383b;
  width:60px;
  height:30px;
  left:60px;
  top:30px;
}

.colour:after {
  position: absolute;
  content:"";
  background-color: #f9c74f;
  width:5px;
  height:15px;
  border: 3px solid #333;
  left:122px;
  top:44px;
  box-shadow: 0px -19px #333;
}

.windows {
  position: absolute; 
  height:0;
  width:70px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 28px solid #333;
  top:8px;
  left:4px;
}

.windows:before {
  content:"";
  position: absolute;
  height:0;
  width:65px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 22px solid #aed9e0;
  top:3px;
  left:-2.5px;
}

.windows:after {
  content:"";
  position: absolute;
  width:5px;
  height:25px;
  background-color: #333;
  left:45px;
  box-shadow: -25px 0 #333;
}

.leftWheel {
  position: absolute;
  width:35px;
  height:15px;
  border: 3px solid #333;
  background-color: #d3d3d3;
  border-radius: 30px 30px 0 0;
  top:47px;
  left:-5px;
}

.rightWheel {
  position: absolute;
  width:35px;
  height:15px;
  border: 3px solid #333;
  background-color: #d3d3d3;
  border-radius: 30px 30px 0 0;
  top:47px;
  left:75px;
}

.wheel {
  position: absolute;
  border-radius:50%;
  width:15px;
  height:15px;
  background-color: #d3d3d3;
  border: 8px solid #333;
  box-shadow: inset 5px 5px #f5f3f4;
  top:2px;
  left:2px;
  animation: spin .5s infinite linear;
}

Add some clouds:

.clouds {
  position: absolute;
  background-color: rgba(255,255,255,0.5);
  width:35px;
  height:10px;
  border-radius: 20px;
  top:100px;
  left:100px;
  z-index:1;
  box-shadow: 130px 50px rgba(255,255,255,0.5), -100px 20px rgba(255,255,255,0.5);
  animation: cloud 1.5s linear infinite reverse;
}

Step3.

Add CSS Animation

For the road:

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

Make the wheels spin:

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

To move the clouds:

@keyframes cloud {  
  from{left:-150px;}
  to{left: 400px;}
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Bouncing Basketball

Basketball player illustration
Do you like this image? Check more images in the store.

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Basketball follow the steps below:

Step1.

Add HTML

<div class="basketball">
    <div class="ball">
    <div class="lines"></div>
    </div>
  <div class="shadow"></div>
  </div>

Step2.

Add CSS

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

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

.basketball {
  position: relative;
  top: 50px;
  left:-50px;
}

Style the ball:

.ball {
  position: absolute;
  background-color: #e76f51;
  border-radius:50%;
  width:100px;
  height:100px;
  overflow: hidden;
  border: 3px solid #333;
  animation: bounce 1.5s ease-in infinite;
}
.ball:before, .ball:after {
  content:"";
  position: absolute;
  background-color: #333;
  width:110px;
  height:3px;
  top:50px;
  left:-5px;
}

.ball:before {
  transform: rotate(45deg);
}

.ball:after {
  transform: rotate(-45deg);
}

.lines {
  position: absolute;
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  left:-20px;
  top:-20px;
}

.lines:before {
  content:"";
  position: absolute; 
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  top:65px;
  left:60px;
}

Add the shadow:

.shadow {
  position: absolute;
  width:100px;
  height:15px;
  background-color: rgba(0,0,0,0.2);
  border-radius:50%;
  top:95px;
  z-index:-1;
  left:3px;
  animation: scale 1.5s ease-in infinite;
}

Step3.

Add CSS Animation

To make the ball bounce:

@keyframes bounce {
   0% {transform: translate3d(0, 0, 0) rotate(0deg);}
  25% {transform: translate3d(0, -185px, 0) rotate(90deg);}
  50% {transform: translate3d(0, 0, 0) rotate(180deg);}
  75% {transform: translate3d(0, -185px, 0) rotate(270deg);}
  100% {transform: translate3d(0, 0, 0) rotate(360deg);}
}

Scale the shadow:

@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.7);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.7);}
  100% {transform: scaleX(1);}
}

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

Watch also the video tutorial:

Enjoy coding!

Categories
#SVG Web development

How to resize a SVG image?

Files in format .png or .jpg are easy to resize and in the most cases, you do not need to use any special software to do it.
The resizing is more complicated when you want to change the size for .svg format files.

resize SVG files

What is making the .svg different from other image formats?

There can be a lot of confusion about which kind of image format to use to achieve the best result in any given situation.

In the case of .jpg and .png formats, the size of the image depends on the number of pixels. The image resolution is therefore defined by the number of pixels that defined the height and width of an image.

The .svg is a vector-based image format. SVG defines the graphics in XML format. A vector image uses geometric forms such as points, lines, curves and shapes to represent different parts of the image as discrete objects. This is why they retain their high quality no matter how much you scale them (more about .svg file you can read here).

How to resize a SVG image?

SVG images can be created and edited with any text editor but it is often more convenient to create SVG images with a drawing program, like Illustrator, Sketch, Inkscape or another vector-based program.

I am using two ways to resize .svg files by using the text editor (you can use any text editor to resize your image).

Option 1:

When you will open the .svg file in the text editor it should show lines of code.

Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

The width and height attributes of the element define the width and height of the SVG image. So you can change the width and height to what you want.

Option 2:

If you haven’t defined the width and the height of the image in the SVG code you can adjust the size in CSS:

svg {
  width:10%;
}

Example:

Hope this helps!

Categories
CSS Web development

CSS EASTER EGG ANIMATION/ CSS Hover Transition

CSS Easter Animation

Demo:

*to see the CSS transition on the website click here.

To create the CSS Easter Animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="easter">
  <div class="egg">
    <div class="yolk"></div>
  </div>
  <div class="shellBottom">
    <div class="bottom"></div>
  </div>
    <div class="shellTop">
      <div class="hoverMe">Hover Me</div>
      <div class="top"></div>
    </div>
    <div class="shadow"></div>
    <div class="text">Happy Easter!</div>
  </div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}

.easter {
  position: relative;
  left:-100px;
  top:-100px;
}

Style the egg:

.egg {
  position: absolute;
  width: 136px;
  height: 190px;
  background-color: #fffffc;
  border-radius: 50% 60% 50% 50% / 70% 70% 40% 40%;
  box-shadow: inset -5px -7px rgba(0,0,0,0.1);
  z-index:1;
  top:0;
}

.yolk {
  position: absolute;
  content:"";
  width: 90px;
  height:90px;
  background-color: #ffb703;
  border-radius:50%;
  top:65px;
  left:20px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.yolk:before {
  position: absolute;
  content:"";
  background-color: #333;
  width:7px;
  height:10px;
  border-radius:50%;
  top:35px;
  left:30px;
  box-shadow: 20px 0 #333;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2.5s infinite;
}
.yolk:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width:20px;
  height:10px;
  border-radius: 0 0 30px 30px;
  top:50px;
  left:34px;
}
CSS Egg

Add the blink animation to the egg’s eyes:

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    95% {
        transform: scale(1, 1);
    }
}

Style the shell:

.shellBottom {
  background-color: #a2d2ff;
  position: absolute;
  z-index:3;
  width:150px;
  height:77.5px;
  border-radius: 0 0 100px 100px;
  left:-10px;
  top:150px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.shellBottom:before {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  top:-30px;  
}

.shellBottom:after {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:25px;
}

.bottom {
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:75px;
}

.bottom:before {
  content:"";
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-left: 25px solid transparent;
  left:25px;
}

.bottom:after {
  content:"";
  position: absolute;
  height:30px;
  width:5px;
  background-color: rgba(0,0,0,0.1);
  left:45px;
}

.shellTop {
  position: absolute;
  background-color: #a2d2ff;
  box-shadow: inset -5px 0 rgba(0,0,0,0.1);
  width:150px;
  height:140px;
  border-radius: 50% 50% 0 0/60% 60% 0 0;
  top:-20px;
  left:-10px;
  z-index:2;
  transition: ease 1s;
}

.shellTop:before, .shellTop:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
}

.shellTop:after {
  left:50px;
}

.top {
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
  left:100px;
}

.hoverMe {
  position: absolute;
  font-family:arial black;
  top:60px;
  left:35px;
  color: #bde0fe;
}
CSS Easter Egg Animation

Add transition on hover:

.shellTop:hover {
  top:-80px;
}

Style the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:170px;
  height:20px;
  border-radius:50%;
  top:212px;
  left:48px;
}
CSS Easter Egg

Add the Easter wishes:

.text {
  position: relative;
  left:-250px;
  font-size:20px;
  font-family: arial black;
  top:100px;
  visibility:hidden;
}

.text:before {
  content:"";
  position: absolute;
  width: 200px;
  height:100px;
  border-radius:30px;
  background-color: #fff;
  left:-25px;
  top:-35px;
  z-index:-1;
}

.text:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 20px solid #fff;
  border-right:35px solid transparent;
  top: 20px;
  left:170px;
}

Add transition on hover to make the wishes visible:

.container:hover .text {
  visibility:visible;
  transition-delay:.2s;
}

To see the CSS Easter Animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Egg Shape and CSS Easter eggs

Easter is coming very soon and with the Easter coloured eggs. I love coming up with new Easter egg decorating ideas each year 🙂

CSS Easter Eggs
*to see the CSS Easter Eggs on the website click here.

Coloured eggs have become one of the most widely recognized Easter symbols, but did you know that coloured eggs are older than Easter?

Yes, in many cultures, the coloured egg is a symbol of new life fertility and rebirth.

Today I’ll show you how to create the Egg shape in CSS using the border-radius property and some simple ideas how to style the CSS eggs.

Let’s start with the CSS Egg Shape:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>

.egg {
   position: absolute;
   width: 140px;
   height: 200px;
   background-color: lightblue;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>

<body>
   <div class="egg"></div>
</body>
</html>

Output:

CSS Egg Shape

To style/ decorate the CSS eggs I used the CSS Gradients (check also CSS background stripes) and the CSS box-shadow property.

Demo:

Step1.

Add HTML

Create the container and add three eggs:

<div class="container">
  <div class="eggOne"></div>
  <div class="eggTwo"></div>
  <div class="eggThree"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}

Add the eggs:

.eggOne, .eggTwo, .eggThree {
   position: absolute;
   overflow:hidden;
   display: inline-block;
   width: 126px;
   height: 180px;
   box-shadow: inset -10px -10px rgba(0,0,0,0.1);
   top:-100px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Style the first egg by using the linear gradient background:

.eggOne {
  left:-300px;
  background: repeating-linear-gradient(#f9c74f, #f9c74f 10px,
  #90be6d 10px, #90be6d 20px);
}

Style the second egg by using box-shadow property:

.eggTwo {
  left:-100px;
  background-color: #f94144;
}

.eggTwo:before {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color: #fff;
  height:25px;
  width:25px;
  left:10px;
  box-shadow: 40px 20px #fff, 70px 60px #fff, 100px 30px #fff, 30px 175px #fff, 20px 60px #fff,-10px 95px #fff, -20px 135px #fff, 30px 135px #fff, 30px 95px #fff, 70px 105px #fff, -10px 40px #fff, 80px 155px #fff;
}

.eggTwo:after {
  content:"";
  position: absolute;
  box-shadow: inset -10px -10px rgba(0,0,0,0.02);
  width: 126px;
  height: 180px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Style the third egg by using the linear gradient background:

.eggThree {
  left:100px;
  background: repeating-linear-gradient(-45deg, #70c1b3, #70c1b3 20px,
  #247ba0 20px, #247ba0 40px);
}

Add shadow to the eggs:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  border-radius:50%;
  z-index:-1;
  width:130px;
  height:20px;
  top:65px;
  left:-300px;
  box-shadow: 200px 0 rgba(0,0,0,0.1), 400px 0 rgba(0,0,0,0.1);
}

To see the CSS Easter Eggs on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!