CSS Slash

Developer
KorraFocus
Size
2,798 Kb
Views
8,096
  1. CSS Slash Previews
  2. CSS Slash HTML Codes

How do I make an css slash?

What is a css slash? How do you make a css slash? This script and codes were developed by KorraFocus on 08 December 2022, Thursday.

CSS Slash Previews
IQ Test

CSS Slash - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Slash</title>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<style>
#til {height: 350px; width: 350px; border: 10px solid #fcfcfc; position: relative; margin: auto; overflow: hidden; z-index: 1}
#til1 {height: 350px; width: 350px; background: #FD3633; z-index: 1}
.til2 {height: 80px; width: 80px; background-position: center; background-size: cover; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; position: absolute; border: 5px solid #fcfcfc; top: 10px; z-index: 2}
.til3 {height: 70px; width: 235px; position: absolute; background: #fcfcfc; top: 18px; right: 10px; border-left: 25px solid #fcfcfc; font-family: arvo; font-weight: 700; color: #FD3633; text-transform: lowercase; line-height: 55px; font-size: 30px; letter-spacing: -2px}
.til3a {height: 10px; width: 230px; font-family: calibri; text-align: left; color: #aaa; font-size: 8px; text-transform: uppercase; position: absolute; font-weight: 400; top: 45px; letter-spacing: 2px; line-height: 10px}
.til4 {width: 310px; border-width: 10px 5px 10px 10px; border-color: #fcfcfc; border-style: solid; position: absolute; bottom: 10px; left: 10px; height: 210px; background: #fcfcfc; color: #555; font-family: calibri; text-align: justify; overflow: auto; font-size: 11px; line-height: 12px; padding-right: 5px}
.til4::-webkit-scrollbar {width: 5px}
.til4::-webkit-scrollbar-thumb {border: 1px solid #FD3633}
#til .til2 {opacity: 0; left: 5px; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease}
#til .til3 {opacity: 0; right: 5px; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease}
#til:hover .til2 {opacity: 1; left: 10px; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s}
#til:hover .til3 {opacity: 1; right: 10px; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9s}
#til .til4 {opacity: 0; bottom: 5px; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease}
#til:hover .til4 {opacity: 1; bottom: 10px; -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -ms-transition-delay: 1.2s; -o-transition-delay: 1.2s}
.tili1, .tili2, .tili3, .tili4 {position: absolute; top: 0; height: 350px; width: 87.5px; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out;}
.tili1 {background-position: 0px 0px}
.tili2 {left: 87.5px; background-position: -87.5px 0px}
.tili3 {left: 175px; background-position: -175px 0px}
.tili4 {left: 263px; background-position: -263px 0px}
#til:hover .tili1, #til:hover .tili3 {top: -350px; }
#til:hover .tili2, #til:hover .tili4 {top: 350px; }
#til:hover .tili2 {-webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s}
#til:hover .tili3 {-webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s}
#til:hover .tili4 {-webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transiton-delay: 0.6s; -o-transition-delay: 0.6s}
.til4 b {font-family: arvo; text-transform: lowercase; font-weight: 700; color: #FD3633}
</style>
<div id="til"> <div class="tili1" style="background-image: url(https://i.imgur.com/DmPJpPB.png)"></div> <div class="tili2" style="background-image: url(https://i.imgur.com/DmPJpPB.png)"></div> <div class="tili3" style="background-image: url(https://i.imgur.com/DmPJpPB.png)"></div> <div class="tili4" style="background-image: url(https://i.imgur.com/DmPJpPB.png)"></div> <div id="til1"> <div class="til2" style="background-image: url(http://images6.fanpop.com/image/photos/35400000/s-a-m-sam-claflin-35403309-300-360.png")></div> <div class="til3">it was in london <div class="til3a">tag: words: notes: </div> </div> <div class="til4"><b>Cupcake ipsum dolor sit.</b> Amet icing caramels. Toffee sesame snaps chocolate. Biscuit pastry soufflé pie biscuit. Cheesecake cheesecake apple pie sweet. Jujubes pastry marshmallow jujubes cotton candy pastry cake ice cream. Jelly cake fruitcake toffee caramels lollipop candy canes. Pastry gummies topping bear claw chocolate bar pastry sweet roll cake ice cream. Chocolate bar oat cake jelly-o pastry dragée gingerbread croissant pudding liquorice. Lollipop liquorice cheesecake oat cake marshmallow jelly-o. Cake cake icing fruitcake icing candy wafer sweet. Cake icing cookie. Tiramisu jelly-o icing cake icing lemon drops chupa chups biscuit.
<p></p>Cake danish bear claw brownie donut dragée macaroon liquorice. Caramels macaroon dragée jelly ice cream. Muffin chocolate powder donut dessert tootsie roll caramels. Apple pie chupa chups powder tiramisu chocolate bar tootsie roll pie cupcake cake. Cupcake cupcake toffee fruitcake fruitcake jujubes. Muffin gummies cotton candy donut tart ice cream gummies candy canes gummies. Sweet roll biscuit jelly marzipan gummi bears liquorice apple pie. Chocolate jelly wafer gummies chocolate bar jelly donut oat cake cotton candy. Bonbon marzipan donut croissant bonbon chupa chups. Cheesecake chupa chups jelly lollipop jelly beans pudding brownie. Candy canes lemon drops dragée lemon drops cake sesame snaps cake gingerbread cookie. Toffee lollipop brownie icing pie. Lollipop sugar plum brownie brownie chocolate bar bonbon cheesecake cheesecake toffee. Cookie chocolate bar biscuit.
</div> </div>
</div> </div>
</body>
</html>
CSS Slash - Script Codes
CSS Slash - Script Codes
Home Page Home
Developer KorraFocus
Username TutoHebbo
Uploaded December 08, 2022
Rating 3
Size 2,798 Kb
Views 8,096
Do you need developer help for CSS Slash?

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!

KorraFocus (TutoHebbo) Script Codes
Name
Menu Hover
A Pen by KorraFocus
CaixaHover
CaixaMembros
Piazzi
Sliding Door - Godheim
Other Coven Box
Tab Caixa
Journal
Membro2
Create amazing sales emails 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!