HomeОбразованиеRelated VideosMore From: Mohit Manuja Carbstrong

css "stitched look" | Improved version

7 ratings | 538 views
Source Code : http://codepen.io/mohitmanuja/pen/JBDjz css stiched look Improved tutorial that uses linear gradient generated multiple background images. Find below the html/ css code that u will need for your projects Mohit Manuja of http://qualitylessons.net The html: opening and closing div tags with class ="denim" The Css: .denim { width: 400px; height: 200px; background: url(http://qualitylessons.net/Denim_Pattern.png); margin: 10% auto; box-shadow: 0 0 10px rgba(0,0,0,.9); position: relative;} /* creating left and top border*/ .denim:before{ content: ""; background: linear-gradient(to top,transparent , transparent , orange , orange), linear-gradient(to right, transparent , transparent , orange , orange); background-size: 2px 15px, 15px 2px; background-position: top left,top left; background-repeat: repeat-y, repeat-x; width: 380px; height: 180px; position: absolute; left: 10px; top: 10px;} /* creating right and bottom border*/ .denim:after{ content: ""; background: linear-gradient(to bottom, transparent , transparent , orange , orange), linear-gradient(to left, transparent , transparent , orange , orange); background-size: 2px 15px,15px 2px; background-position: top right,bottom left; background-repeat: repeat-y, repeat-x; width: 380px; height: 180px; position: absolute; left: 10px; top: 10px;} } Mohit Manuja of http://qualitylessons.net Training Online and face 2 face at mumbai ,India get trained in dreamweaver (html, css, css3, html5, JQuery), Flash and actionscript 3.0 call email or skype me for more details: +91-9022995952 / [email protected] / mohit.manuja Join me on FaceBook http://facebook.com/mmanuja
Html code for embedding videos on your blog
Text Comments (7)
Darius D'Silva (1 year ago)
where is the follow up video?
Darius D'Silva (1 year ago)
why do Pseudo Elements on https://www.w3schools.com/css/css_pseudo_elements.asp have double colons before the word but in your code you have only one?
Darius D'Silva (1 year ago)
I'm grateful for what you did do.
yes they do ...and ids with a # sign. I probably didnt make a 2nd part as no one seemed to want it or show any interest ...only a youtuber knows that it takes a lot of creativity and time to work up ideas and we do get discouraged when we dont see interest or viewership .
Darius D'Silva (1 year ago)
classes start with a dot in the css right?
Darius D'Silva (1 year ago)
what do you mean by distinguishing between pseudo elements and classes?
whats given on the website is more appropriate although it doesnt affect the functionality and its for distinguishing between pseudo elements and classes

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.