Long Shadow Calendar Icon

Developer
Miro Karilahti
Size
1,856 Kb
Views
76,912
  1. Long Shadow Calendar Icon Previews
  2. Long Shadow Calendar Icon HTML Codes
  3. Long Shadow Calendar Icon CSS Codes

How do I make an long shadow calendar icon?

Calendar icon with long shadows.. What is a long shadow calendar icon? How do you make a long shadow calendar icon? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.

Long Shadow Calendar Icon Previews
IQ Test

Long Shadow Calendar Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Long Shadow Calendar Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="icon"> <div id="month">January</div> <div id="day">24</div>
</div>
</body>
</html>

Long Shadow Calendar Icon - Script Codes CSS Codes

*{margin:0;padding:0;}
body{ background:#356;
}
#icon{ width:256px; height:256px; position:absolute; top:50%;left:50%; margin:-128px 0 0 -128px; border-radius:40px; font-family:Verdana,sans-serif; box-shadow: 0 1px 0 #aaa, 0 2px 0 #aaa, 0 3px 0 #aaa, 0 4px 0 #aaa, 0 5px 0 #aaa, 0 6px 0 #aaa, 0 7px 0 #aaa, 0 8px 0 #aaa, 0 9px 0 #aaa, 0 10px 0 #aaa;
}
#month{ background:#ee4433; border-radius:40px 40px 0 0; font-size:125%; font-weight:700; text-align:center; text-transform:uppercase; line-height:60px; color:#fff; text-shadow: 0 1px #c21, 0 2px #c21, 0 3px #c21, 0 4px #c21, 0 5px #c21;
}
#day{ background:#ddd; border-radius:0 0 40px 40px; padding-bottom:16px; font-size:800%; text-align:center; line-height:180px; color:#444; text-shadow: 0 1px #aaa, 0 2px #aaa, 0 3px #aaa, 0 4px #aaa, 0 5px #aaa, 0 6px #aaa, 0 7px #aaa, 0 8px #aaa;
}
Long Shadow Calendar Icon - Script Codes
Long Shadow Calendar Icon - Script Codes
Home Page Home
Developer Miro Karilahti
Username miroot
Uploaded July 07, 2022
Rating 3
Size 1,856 Kb
Views 76,912
Do you need developer help for Long Shadow Calendar Icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Miro Karilahti (miroot) Script Codes
Name
Single element Nexus 5
Button with sliding information
Calendar
Simple personal profile
Flat sidebar
Navigation
Pure CSS Gallery
Expanding Photo Stack
Background change in pure CSS
Corner Ribbons
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!