CSS3 Content Callouts

Developer
Alex Raven
Size
2,356 Kb
Views
40,480
  1. CSS3 Content Callouts Previews
  2. CSS3 Content Callouts HTML Codes
  3. CSS3 Content Callouts CSS Codes

How do I make an css3 content callouts?

Demo for the daily dabble: Creating Stylized Callouts with the CSS3 Content Property. What is a css3 content callouts? How do you make a css3 content callouts? This script and codes were developed by Alex Raven on 19 September 2022, Monday.

CSS3 Content Callouts Previews
IQ Test

CSS3 Content Callouts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Content Callouts</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2 class="title">CSS Callouts</h2>
<section class="frame"> <h3 data-callout="NOTE">Here's Something to Keep in Mind...</h3> <p>Just add <code>data-callout="NOTE"</code> to any header to create a stylized callout like this. Aenean volutpat orci vitae eros fringilla, ut iaculis magna euismod. Etiam ultricies luctus nisl non cursus. Phasellus faucibus bibendum orci in mattis. Nulla facilisi.</p> <h3 data-callout="CODE">Get The Code</h3> <p>Just add <code>data-callout="CODE"</code> to any header to create a stylized callout like this. Aenean volutpat orci vitae eros fringilla, ut iaculis magna euismod. Etiam ultricies luctus nisl non cursus. Phasellus faucibus bibendum orci in mattis. Nulla facilisi.</p> <h3 data-callout="DEMO">View The Live Demo</h3> <p>Just add <code>data-callout="DEMO"</code> to any header to create a stylized callout like this. Aenean volutpat orci vitae eros fringilla, ut iaculis magna euismod. Etiam ultricies luctus nisl non cursus. Phasellus faucibus bibendum orci in mattis. Nulla facilisi.</p> <h3 data-callout="FREE">Start Your Free Trial Today!</h3> <p>Just add <code>data-callout="FREE"</code> to any header to create a stylized callout like this. enean volutpat orci vitae eros fringilla, ut iaculis magna euismod. Etiam ultricies luctus nisl non cursus. Phasellus faucibus bibendum orci in mattis. Nulla facilisi.</p>
</section>
</body>
</html>

CSS3 Content Callouts - Script Codes CSS Codes

/* Demo styles
-------------------------------------------------------------- */
body { background: #eee; color: #666; margin: 0; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.title { color: #bbb; font-size: 40px; font-style: italic; font-weight: 200; margin: 30px 0 30px 15%;
}
p { line-height: 25px;
}
code { background: #f7f7f7; border-bottom: 1px solid #eee; color: #888; font-size: 90%; padding: 4px; vertical-align: middle;
}
/* The base styles for frame & callouts
-------------------------------------------------------------- */
.frame { background: #fff; padding: 20px 40px;
}
[data-callout] { line-height: 25px; margin: 50px 0 25px; position: relative; color: #353535;
}
[data-callout]::before { /* content */ content: attr( data-callout); /* style */ background: #353535; border: 5px solid #fff; color: #fff; font-size: 10px; text-align: center; border-radius: 50%; box-shadow: -2px 0 2px rgba(0, 0, 0, .2); box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2); /* sizing */ box-sizing: content-box; width: 50px; height: 50px; line-height: 50px; margin-right: 10px; margin-top: -20px; /* mobile first postition */ float: left;
}
/* The larger viewport styles for frame & callouts
-------------------------------------------------------------- */
@media ( min-width: 480px) { [data-callout]::before { position: absolute; left: -70px; } .frame { box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1); margin-left: 15%; position: relative; }
}
CSS3 Content Callouts - Script Codes
CSS3 Content Callouts - Script Codes
Home Page Home
Developer Alex Raven
Username asraven
Uploaded September 19, 2022
Rating 3
Size 2,356 Kb
Views 40,480
Do you need developer help for CSS3 Content Callouts?

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!

Alex Raven (asraven) Script Codes
Name
Purely CSS Line Icons
AWWWards Inspired Animated Heart Share Icon
IMac with scrolling screenshot animation on hover
CSS Counter Auto Numbered Steps
Media Queries Test Page
Simple Pulsing Image Hover Effect
A Directory Tree List Style
Hover Morphing CSS Line Icons
OffScreen Panel With Tabbed Nav
Screen Capture an HTML Element and Save as a Downloadable PNG
Create amazing love letters 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!