added the css pseudo element tutorial files

wilsmex · Aug 5, 2019 · d7b0adc · d7b0adc
1 parent 9a3ad66
commit d7b0adc
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 0 deletions.
diff --git a/css-psuedo-elements/CSS Psuedo Elements.key b/css-psuedo-elements/CSS Psuedo Elements.key
diff --git a/css-psuedo-elements/CSS Psuedo Elements.pptx b/css-psuedo-elements/CSS Psuedo Elements.pptx
diff --git a/css-psuedo-elements/README.md b/css-psuedo-elements/README.md
@@ -0,0 +1,11 @@
+# CSS Psuedo Elements Tutorial
+
+This video tutorial covers working with the CSS Psuedo Elements. We'll take a look at the ::before and ::after psuedo elements alongside ::first-line and ::first-letter. 
+
+## Getting Started
+
+See the video tutorial here: https://youtu.be/0eyCgyWbcHE
+
+## License
+
+This project is licensed under the MIT License
diff --git a/css-psuedo-elements/advanced.css b/css-psuedo-elements/advanced.css
@@ -0,0 +1,36 @@
+body{
+ background-color:gray;
+}
+#test{
+ width: 200px;
+ height:200px;
+ position:relative;
+ margin:100px auto;
+ background-color:white;
+}
+#test::before{
+ display:block;
+ position:absolute;
+ content: " ";
+ box-shadow:-5px 5px 5px rgba(0,0,0,.5);
+ width:100px;
+ height:25px;
+ bottom:3px;
+ left:8px;
+ transform:skew(0deg,-4deg);
+ z-index:-5;
+
+
+}
+#test::after{
+ display:block;
+ position:absolute;
+ content: " ";
+ box-shadow:5px 5px 5px rgba(0,0,0,.5);;
+ width:100px;
+ height:25px;
+ bottom:3px;
+ right:8px;
+ transform:skew(0deg,4deg);
+ z-index:-5;
+}
diff --git a/css-psuedo-elements/advanced.html b/css-psuedo-elements/advanced.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Hello!</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="advanced.css">
+</head>
+<body>
+ <div id="test">
+
+ </div>
+</body>
+</html>
diff --git a/css-psuedo-elements/basic.css b/css-psuedo-elements/basic.css
@@ -0,0 +1,21 @@
+p::first-letter{
+ font-weight: bold;
+}
+
+p::first-line{
+ color: green;
+}
+
+p::before {
+ content: "[";
+}
+p::after {
+ content: " ]";
+}
+p *{
+ border:1px solid blue;
+}
+
+p .read_more::after {
+ content: "...";
+}
diff --git a/css-psuedo-elements/basic.html b/css-psuedo-elements/basic.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Hello!</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="basic.css">
+</head>
+<body>
+ <p><span>test</span> <span>test</span> <span>test</span> <span>test</span></p>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere ipsum sequi explicabo rerum, porro deserunt doloribus nostrum ducimus ullam nobis recusandae similique velit excepturi fugiat unde id dolor molestias. <a class = "read_more" href="#">Read More</a></p>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere ipsum sequi explicabo rerum, porro deserunt doloribus nostrum ducimus ullam nobis recusandae similique velit excepturi fugiat unde id dolor molestias. <a class = "read_more" href="#">Read More</a></p>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere ipsum sequi explicabo rerum, porro deserunt doloribus nostrum ducimus ullam nobis recusandae similique velit excepturi fugiat unde id dolor molestias. <a class = "read_more" href="#">Read More</a></p>
+
+</body>
+</html>