Diagonal Lines using CSS

rpjs (Rob Smyth)

Uploaded: 25th April 2015, Views: 1503

Description

Diagonal Line Pattern made by only html/css. This is created using linear-gradient as the background of the body tag. It can also be implemented on a div if you want to use this pattern on a selected area only. The main key here is the background-size property which decides the thickness of the diagonal lines and this can be very helpful in creating different types of patterns.

Found this code at cssdeck by chocolatina, thought it might be useful.

HTML

CSS

.diagonal_lines_pattern, body{
	background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #ccc), color-stop(0.25, #ccc), color-stop(0.25, #bbb), color-stop(0.5, #bbb), color-stop(0.5, #ccc), color-stop(0.75, #ccc), color-stop(0.75, #bbb));
	background-image: -webkit-linear-gradient(left bottom, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
	background-image: -moz-linear-gradient(left bottom, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
	background-image: -ms-linear-gradient(left bottom, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
	background-image: -o-linear-gradient(left bottom, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#bbbbbb',GradientType=0 ); / IE6-8 */
	background-image: linear-gradient(left bottom, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
	background-size: 30px 30px;
	width:100%;
	height:100%;
}
.diagonal_lines_pattern p{
	color:#fff;
	display: block;
	position:absolute;
	top:50%;
	left:50%;
	width:14em;
	text-align:center;
	font-family: 'Helvetica Neue',Helvetica, sans-serif;
	font-size: 60px;
	font-weight:bold;
	line-height: 1.5;
	margin-left:-7em;
	margin-top:-1em;
	text-shadow: 0px 0px 2px #686868,
                 0px 1px 1px #ddd,
                 0px 2px 1px #d6d6d6,
                 0px 3px 1px #ccc,
                 0px 4px 1px #c5c5c5,
                 0px 5px 1px #c1c1c1,
                 0px 6px 1px #bbb,
                 0px 7px 1px #777,
                 0px 8px 3px rgba(100, 100, 100, 0.4),
                 0px 9px 5px rgba(100, 100, 100, 0.1),
                 0px 10px 7px rgba(100, 100, 100, 0.15),
                 0px 11px 9px rgba(100, 100, 100, 0.2),
                 0px 12px 11px rgba(100, 100, 100, 0.25),
                 0px 13px 15px rgba(100, 100, 100, 0.3);
	
}

JavaScript

Diagonal Lines using CSS

Settings

HTML Preprocessors (Coming Soon)

CSS Preprocessors (Coming Soon)

JS Preprocessors (Coming Soon)

Diagonal Lines using CSS

Settings

HTML Preprocessors (Coming Soon)

CSS Preprocessors (Coming Soon)

JS Preprocessors (Coming Soon)

Share Code