Today Create Glowing Card Effect Using HTML & CSS. How you can create a black color eye-catching animation or hover effect using HTML, and CSS step-by-step. There is no Javascript we use here. This step-by-step post helps you to create a cool design using CSS. It will help you to boost your web development journey.
This is the one variant of “Create Glowing Card Effect Using HTML & CSS”. We can simply modify this design only changing the color of style.css. With “Create Glowing Card Effect Using HTML & CSS” you can take your design skills to the next level and impress your audience. Don’t miss the opportunities to “Create Glowing Card Effect Using HTML & CSS”. and elevate your web development game.
Create Glowing Card Effect Using HTML & CSS
This is the single card design that we create for a glowing effect. It is a single div. We can replicate this div section how much time you need. We will create the design that you see in the photo above. So let’s start without wasting any time.
<div class="card">
<div class="face face1">
<div class="content">
<i class="fab fa-android"></i>
<h3>Android</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab
repudiandae, explicabo voluptate et hic cum ratione a. Officia
delectus illum perferendis maiores quia molestias vitae fugiat
aspernatur alias corporis?
</p>
<a href="#" type="button">Read More</a>
</div>
</div>
</div>Complete HTML That We Create
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html>
<head>
<title>Card Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://kit.fontawesome.com/95a02bd20d.js"></script>
<!-- This code will be created by cyber arpan. For more content visit "securewitharpan.com" -->
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<i class="fab fa-windows"></i>
<h3>Windows</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab
repudiandae, explicabo voluptate et hic cum ratione a. Officia
delectus illum perferendis maiores quia molestias vitae fugiat
aspernatur alias corporis?
</p>
<a href="#" type="button">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<i class="fab fa-android"></i>
<h3>Android</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab
repudiandae, explicabo voluptate et hic cum ratione a. Officia
delectus illum perferendis maiores quia molestias vitae fugiat
aspernatur alias corporis?
</p>
<a href="#" type="button">Read More</a>
</div>
</div>
</div>
<!-- This code will be created by cyber arpan. For more content visit "securewitharpan.com" -->
<div class="card">
<div class="face face1">
<div class="content">
<i class="fab fa-apple"></i>
<h3>Apple</h3>
</div>
</div>
<!-- This code will be created by cyber arpan. For more content visit "securewitharpan.com" -->
<div class="face face2">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab
repudiandae, explicabo voluptate et hic cum ratione a. Officia
delectus illum perferendis maiores quia molestias vitae fugiat
aspernatur alias corporis?
</p>
<a href="#" type="button">Read More</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS (Cascading Style Sheets):
The main thing of “Create Glowing Card Effect Using HTML & CSS” is CSS. CSS helps us to create this awesome design. Without CSS every every webpage is ugly. So CSS is mandatory for web design. Here is the CSS that I used to create this card effect.
/* This code will be created by cyber arpan. For more content visit "securewitharpan.com" */
body {
display: flex;
margin: 0;
padding: 0;
min-height: 100vh;
background: #444;
justify-content: center;
align-items: center;
font-family: arial;
}
.container {
width: 1000px;
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container .card {
position: relative;
}
.container .card .face {
width: 300px;
height: 200px;
transition: .4s;
}
.container .card .face.face1 {
position: relative;
background: #333;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
}
.container .card:hover .face.face1 {
transform: translateY(0);
box-shadow:
inset 0 0 60px whitesmoke,
inset 20px 0 80px #f0f,
inset -20px 0 80px #0ff,
inset 20px 0 300px #f0f,
inset -20px 0 300px #0ff,
0 0 50px #fff,
-10px 0 80px #f0f,
10px 0 80px #0ff;
}
/* This code will be created by cyber arpan. For more content visit "securewitharpan.com" */
.container .card .face.face1 .content {
opacity: .2;
transition: 0.5s;
text-align: center;
}
.container .card:hover .face.face1 .content {
opacity: 1;
}
.container .card .face.face1 .content i {
font-size: 3em;
color: white;
display: inline-block;
}
.container .card .face.face1 .content h3 {
font-size: 1em;
color: white;
text-align: center;
}
.container .card .face.face1 .content a {
transition: .5s;
}
.container .card .face.face2 {
position: relative;
background: whitesmoke;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, .8);
transform: translateY(-100px);
}
/* This code will be created by cyber arpan. For more content visit "securewitharpan.com" */
.container .card:hover .face.face2 {
transform: translateY(0);
}
.container .card .face.face2 .content p,
a {
font-size: 10pt;
margin: 0;
padding: 0;
color: #333;
}
.container .card .face.face2 .content a {
text-decoration: none;
color: black;
box-sizing: border-box;
outline: 1px dashed #333;
padding: 10px;
margin: 15px 0 0;
display: inline-block;
}
.container .card .face.face2 .content a:hover {
background: #333;
color: whitesmoke;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* This code will be created by cyber arpan. For more content visit "securewitharpan.com" */Conclusion:
After following this step-by-step guide. I hope you successfully Create Glowing Card Effect Using HTML & CSS.
2 Comments
Your comment is awaiting moderation.
Who want to see my nudes? https://mtboom.page.link/cilckme
Your comment is awaiting moderation.
Hi,Moderator, Excellent blog you’ve got here!
MEGA onion мега дарк – это самый крупный анонимный магазин в РФ, который работает на просторах сети. Площадка обеспечивает каждому пользователю 100% анонимность и безопасность. К тому же гарантирует защиту средств, простую и быструю оплату товаров и услуг в разной валюте включая криптовалюту, а также обход всех блокировок. Для посещения вам не потребуется соединение Tor или VPN. Достаточно перейти на сайт MEGA, по сслыке: мега магазин . Пройти простую регистрацию и попасть на сайт, который откроет для вас массу возможностей. Все продавцы проверяются администрацией MEGA, официальный сайт гарантирует безопасность своим пользователям. Потому, если вам требуется купить что-либо, перейти на мега официальный сайт будет правильным решением.
– mega.sb
– мега дарк
– мега магазин
– mega link
2HFF99L23!
Your comment is awaiting moderation.
On 6 April 1999, the Company changed its name to AstraZeneca PLC levitra online overnight delivery Only 1 3 of cats with signs of urinary tract disease will have a urinary tract infection
Your comment is awaiting moderation.
Hi!
Earn every MINUTE without limit of 100, 200, 500, 1000 and whiter Dollars USA, there are NO limits!
We have been trusted by millions of people around the world since 2014!
The most convenient platform for online trading and investment 2023!
*Awarded by FxDailyInfo, a reputable international resource!
*World Business Outlook Award!
The most reliable financial broker 2023!
+ Instant withdrawal!
+ Demo account +10 000D!
+ Free Signals!
+ Free training!
+ *PROMO-CODE*: OLYMPOLYMP
*From $50 +30% to deposit!
WARNING! If registration is closed for your country, you need to enable VPN and choose a country from which registration is not prohibited, for example (Singapore).
After registration you can disable VPN and start earning, it is allowed!
Sign up, and earn unlimited earnings every 60 seconds!
The promo code is valid on these links only!
DOWNLOAD IOS APP (App Store)
https://app.appsflyer.com/id1053416106?pid=affiliate&c=101773&af_siteid=101773&af_sub2=App-Store&af_sub1=XR
DOWNLOAD ANDROID APP (Google Play)
https://app.appsflyer.com/com.ticno.olymptrade?pid=affiliate&c=101773&af_siteid=101773&af_sub2=Google-Play&af_sub1=XR
WEB VERSION
https://trkmad.com/101773/
Beautiful aap
Thankyou for sharing your valuable feedback.