Carl Philippe Effect

Developer
Jordan Checkman
Size
1,858 Kb
Views
6,072
  1. Carl Philippe Effect Previews
  2. Carl Philippe Effect HTML Codes
  3. Carl Philippe Effect CSS Codes

How do I make an carl philippe effect?

Inspired byhttp://carlphilippebrenner.com/But done via CSS instead of JS.Black boxed.. What is a carl philippe effect? How do you make a carl philippe effect? This script and codes were developed by Jordan Checkman on 21 January 2023, Saturday.

Carl Philippe Effect Previews
IQ Test

Carl Philippe Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Carl Philippe Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>	<div id="box"> <div>I am ze Content.</div>	<span class="U-L"></span>	<span class="B-L"></span>	<span class="B-R"></span>	<span class="U-R"></span>	</div>
</body>
</html>
</body>
</html>

Carl Philippe Effect - Script Codes CSS Codes

body{	background: rgb(112,128,144);
}
#box{ display: table;	position: relative;	height: 400px;	width: 250px;	background: rgb(112,128,144);	border: 1px solid white;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;	-webkit-transition: .05s border;	-moz-transition: .05s border;	-o-transition: .05s border;	-ms-transition: .05s border;	transition: .05s border;
}
#box>div{ display: table-cell; vertical-align: middle; text-align: center; font-family: sans-serif; font-weight: bold; color: white;
}
#box:hover{ border: 0;
}
#box>span{	position: absolute;	background: white;	-webkit-transition: width .7s, height .7s;	-moz-transition: width .7s, height .7s;	-o-transition: width .7s, height .7s;	-ms-transition: width .7s, height .7s;	transition: width .7s, height .7s;
}
.U-L{	top: 0;	left: 0;
}
.B-R{	bottom: 0;	right: 0;
}
.U-L,
.B-R{	width: 3px;	height: 0;
}
.U-R{	top: 0;	right: 0;
}
.B-L{	bottom: 0;	left: 0;
}
.B-L,
.U-R{	height: 3px;	width: 0;
}
#box:hover>.U-L,
#box:hover>.B-R{	height: 100%;
}
#box:hover>.B-L,
#box:hover>.U-R{	width: 100%;
}
Carl Philippe Effect - Script Codes
Carl Philippe Effect - Script Codes
Home Page Home
Developer Jordan Checkman
Username JordanC
Uploaded January 21, 2023
Rating 3
Size 1,858 Kb
Views 6,072
Do you need developer help for Carl Philippe Effect?

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!

Jordan Checkman (JordanC) Script Codes
Name
A Pen by Jordan Checkman
Contenteditable Test
RSW
Print Button
Awesome Reports
Fancy Menu
Word Slider Demo
Pretty
Create amazing web content 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!