Title with adaptative background

Developer
Khoné Vongsouthi
Size
1,907 Kb
Views
10,120
  1. Title with adaptative background Previews
  2. Title with adaptative background HTML Codes
  3. Title with adaptative background CSS Codes

How do I make an title with adaptative background?

Source: http://jsfiddle.net/Ch7bL/29/. What is a title with adaptative background? How do you make a title with adaptative background? This script and codes were developed by Khoné Vongsouthi on 02 December 2022, Friday.

Title with adaptative background Previews
IQ Test

Title with adaptative background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Title with adaptative background</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap-center clearfix"> <h1 class="title-primary"> <span> <span>Lorem ipsum dolor sit amet. Consectetuer adipiscing elit, nam cursus morbiutmi.</span> </span> </h1>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Title with adaptative background - Script Codes CSS Codes

.wrap-center { margin: auto; width: 420px;
}
.title-primary { position: relative; border-left: 40px solid #183a8d; width: 100%; font-weight: bold; font-size: 36px; line-height: 50px; text-transform: uppercase; color: #fff;
}
.title-primary > span { position: relative; padding: 10px 0; background: #183a8d;
}
.title-primary:before, /* firefox */
.title-primary > span:before { content: ''; display: block; position: absolute; left: -40px; top: 0; width: 40px; height: 100%; background: #183a8d;
}
.title-primary:before { /* firefox */ top: auto; bottom: -4px;
}
.title-primary span span { position: relative; left: -20px;
}
Title with adaptative background - Script Codes
Title with adaptative background - Script Codes
Home Page Home
Developer Khoné Vongsouthi
Username khone-vongsouthi
Uploaded December 02, 2022
Rating 3
Size 1,907 Kb
Views 10,120
Do you need developer help for Title with adaptative background?

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!

Khoné Vongsouthi (khone-vongsouthi) Script Codes
Name
Button - Center middle
Social navigation in pure CSS3
Jumbotron
Tooltip
List
Form
Datepicker
Language - Selector
Map
Menu - Restaurant
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!