From baca9a29a739600322381fb1b508f0979615ecc6 Mon Sep 17 00:00:00 2001 From: maria-logh Date: Sat, 3 Dec 2016 16:41:13 +0000 Subject: [PATCH 1/3] CSS Transitions Tutorial --- html/lesson5/style.css | 7 +++++ html/lesson5/tutorial.md | 55 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) diff --git a/html/lesson5/style.css b/html/lesson5/style.css index 0b2cf4fd..ed2c5f05 100644 --- a/html/lesson5/style.css +++ b/html/lesson5/style.css @@ -108,3 +108,10 @@ a.btn { padding: 20px 30px; border-radius: 5px; } + +a.btn:hover { + background: black; + transition-property: background; + transition-duration: 4s; + transition-delay: 1s; +} diff --git a/html/lesson5/tutorial.md b/html/lesson5/tutorial.md index 8f242b6e..fd475413 100644 --- a/html/lesson5/tutorial.md +++ b/html/lesson5/tutorial.md @@ -425,6 +425,61 @@ In our case, we only want to change the style of every odd row. Achieving that i > Try changing odd to even + +### Transitions + +Let's take some **property** in our code and change it, making it somehow different. E.g. The `background` of the two links named **btn**, and let's change it on hover. This is a 'change'. Now we can have this affect take place during a number of seconds, this is a **Transition**. +Go ahead and add the selector to the stylesheet. + +```css +a.btn:hover { + + [your property: your value;] + +} +``` + +Add the **property** which we are chaning and its new value: + +```css +a.btn:hover { + background: black; +}``` + +Now create a **Transition** affect: + +```css +a.btn:hover { + background: black; + transition-duration: 4s; +}``` + +Create another one: + +```css +a.btn:hover { + background: black; + transition-duration: 4s; + transition-delay: 1s; +}``` + + + + + + + + + + + + + + + + + + ## But before we end our lesson ### RGB colors and opacity From 27e306427b496ddf84675743762802db215d2368 Mon Sep 17 00:00:00 2001 From: maria-logh Date: Sat, 3 Dec 2016 16:57:54 +0000 Subject: [PATCH 2/3] Irrelevant Change - Ignore (Practice) --- html/lesson5/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/lesson5/tutorial.md b/html/lesson5/tutorial.md index fd475413..0a6d6bf3 100644 --- a/html/lesson5/tutorial.md +++ b/html/lesson5/tutorial.md @@ -450,7 +450,7 @@ Now create a **Transition** affect: ```css a.btn:hover { - background: black; + background: black; transition-duration: 4s; }``` From 91a652b1c137f82928355150811ccbbb333695af Mon Sep 17 00:00:00 2001 From: Kimberley Cook Date: Sun, 5 Feb 2017 21:54:31 +0000 Subject: [PATCH 3/3] css transions added to tut 5 with some working tweaks --- html/lesson5/tutorial.md | 170 +++++++++++++++++---------------------- 1 file changed, 75 insertions(+), 95 deletions(-) diff --git a/html/lesson5/tutorial.md b/html/lesson5/tutorial.md index 0a6d6bf3..f75bc4ec 100644 --- a/html/lesson5/tutorial.md +++ b/html/lesson5/tutorial.md @@ -20,8 +20,7 @@ Download the files required to begin working through the tutorial from [here](ht ### Recap -In the previous lessons, we spoke about **H**yper **T**ext **M**arkup **L**anguage and **C**ascading **S**tyle **S**heets. -**HTML** defines the _structure_ of a website and **CSS** the _presentation_. We also discussed the box model, inline and block elements, pseudo clases and went into more details about CSS Layouts and formatting. +In the previous lessons we spoke about **H**yper **T**ext **M**arkup **L**anguage and **C**ascading **S**tyle **S**heets. Remember how **HTML** defines the structure of a website and **CSS** is the presentation. We also discussed the box model, inline and block elements, pseudo classes and went into more detail with CSS Layouts and formatting. ## Getting started @@ -42,11 +41,11 @@ Also, set a title for your page Before we continue any further, format the existing content of the html file to use paragraphs `

` -> Do you remember how to do that? Ask your coach to help you out if you are having any problems. +> If you do not remember, ask your coach to help you. ## Main styling -Set the font family and reset the padding and margin of the page +Set the font family and reset the padding and margin of the page. ```css body { @@ -56,11 +55,11 @@ body { } ``` -Let's wrap the contents in a `div` element with the id `wrapper` so we can tweak its dimensions and center it. +Let's wrap the contents of the page in a `div` element with the id `wrapper` so we can tweak its dimensions and center it. > Did you remember to close the element you just added? -Style the wrapper +Let's style the wrapper ```css #wrapper { @@ -71,29 +70,25 @@ Style the wrapper } ``` -Try tweaking the style. +Try tweaking some of the styles that we just added to see what happens? > Remove the `max-width` and reload the page - > Remove the `min-width` and try resizing the page - > Do you notice how the content no longer centers when removing the `margin` property? Ask your coach to explain why. ## Text shadow -Text shadow, adds a drop shadow to the header. This only works with CSS3 compatible browsers, so unless you are using a really [old browser](http://caniuse.com/css-textshadow) or IE9, you should be able to see the results. - -The text-shadow property is formatted as follows: +Text shadow will add a drop shadow to the header. The text-shadow property is formatted as follows: `text-shadow: horizontal-shadow vertical-shadow blur color` - horizonal-shadow is the length of the shadow along the x-axis - vertical-shadow is the length of the shadow along the y-axis - blur controls how much, if any, blur radius to add to the shadows. This is optional, but can look cool. -- color controls the color of the shadow. It is also optional +- color controls the color of the shadow. It is also optional. ### Style the header @@ -106,7 +101,7 @@ h1 { } ``` -Tweak the text-shadow property, and add a blur of 2px +Let's tweak the text-shadow property by adding a 2px blur. > Can you see the difference? Keep the version you like the most. @@ -157,19 +152,17 @@ Things should be looking a bit better now, but the images are still too big! Set } ``` -Great! Now our images and links are on the left, and the main content on the right. +Great! Now our images and links are on the left, and our main content is on the right. ### Border-radius -[Border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) enables us to create rounded corners for our elements. In the past, multiple divs and the use of images was required to achieve that effect. +[Border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) enables us to create rounded corners for our elements. Border radius can be defined in many different units - the higher the number, the bigger the curve. An example of border-radius in your code would be: `border-radius: 10px;` -Now that we know what border radius is, let's use it to add a nice frame to the first image. - -Wrap the first image in a `div` with the class `frame` +Let's add it so that it adds a nice frame to the first image. Wrap the first image in a `div` with the class `frame`. ```css .frame { @@ -181,14 +174,15 @@ Wrap the first image in a `div` with the class `frame` } ``` -As we only want the bottom right and bottom left corners to be rounded, we can be more specific when setting the border radius so it only applies to those corners. +If we only wanted the bottom right and bottom left corners to be rounded, we could be more specific when setting the border radius so it only applies to those corners. ```css - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; +border-bottom-left-radius: 5px; +border-bottom-right-radius: 5px; ``` +> Play around with border radius a little bit to see what effects you get. -Let's also round the corners of the second picture. First, let's add a class `rounded` to it. +Let's also round the corners of the second picture. First, let's add a class `rounded` to it then add the `border-radius`. ```css .rounded { @@ -200,9 +194,9 @@ Rounded corners look much nicer, don't you agree? ### Adding some subtle styling to the page -Small details make the difference. +Small details like this can make a big visual difference to your website. -Add a top and bottom border to the first image +Let's add a top and bottom border to the first image. ```css #left-bar .frame img { @@ -212,21 +206,21 @@ Add a top and bottom border to the first image } ``` -Also add a top border to our page, to make it a bit more polished. Add this to the style of the `body` +Also add a top border to our page, to make it a bit more polished. Add this to the style of the `body` element. ```css - border-top: 5px solid #4c4066; +border-top: 5px solid #4c4066; ``` -### Background +### Background images -Background is not a new CSS property, but in CSS3 it had a lot more capabilities. You can set multiple background images, specify their dimension, position and attachment. - -To set a background you can use +You can set a background image to any element on your page. To do this you declare that it's the background you want to change then add a URL, which is the path to your image. Like so: `background: url(path/to/image)` -to set multiple backgrounds, you simple need to specify them separating them by commas +You can also set multiple background images, specify their dimension, position and attachment. To set multiple backgrounds, you simple need to specify them separating them by commas. + + `background: url(path/to/image), url(path/to/other/image), ...` You can also set different properties for your backgrounds, by defining them in a similar comma separated way. @@ -254,7 +248,7 @@ background-size: 420px auto, auto 900px; Awesome. Now we can see Anita's picture properly. -But when we scroll, we don't want the background to change. To fix this, we must set the images as fixed. We can do that by specifying the `background-attachment` property +But when we scroll, we don't want the background to change. To fix this, we must set the images as fixed. We can do that by specifying the `background-attachment` property. Let's add: ```css background-attachment: fixed, fixed; @@ -345,7 +339,7 @@ By using `em` instead of `px` to set the font-size, we are keeping it relative t Increase the `line-height` of all other paragraphs. We can do this with another very smart selector, The **not** selector. -The **not** selector, finds all elements who don't match the specified description, in our case, all paragraphs that don't have a class `about` +The **not** selector, finds all elements who don't match the specified description, in our case, all paragraphs that do not have an `about` class. ```css p:not(.about) { @@ -356,16 +350,16 @@ p:not(.about) { ### Anita's speech The speech that we are using in our page, is titled **Where We Are And Where We Are Going**. -To make our content more clear, wrap the remaining paragraphs (all but the `about`) in a div with the class `speech` +To make our content more clear, wrap the remaining paragraphs (all but the `about` one) in a div with the class `speech`. Also, add its title using an `h2` heading -> That should come right after you open up the `speech` div +> That should come right after you open up the `speech` div. ### Achievements Anita had an amazing personality and was a person who contributed greatly to women in technology. -Let's list some of her achievements, just after the `about` paragraph +Let's list some of her achievements, just after the `about` paragraph. ```html

@@ -380,7 +374,7 @@ Let's list some of her achievements, just after the `about` paragraph
``` -It's nice to use descriptive classes, so its easy for someone else looking at our code to understand what each section is about. Add a class `achievements` to the external `div` we just added. +It's nice to use descriptive classes, so that it's easy for someone else looking at our code to understand what each section is. Add a class `achievements` to the external `div` we just added. Now that we have done that, let's try reseting the list style, so there are no bullets present, and no margin or padding. @@ -397,7 +391,7 @@ So here is how we will be reseting the list styling. We don't want to only speci } ``` -Making it prettier +Let's make it look even better. ```css .achievements li { @@ -408,10 +402,9 @@ Making it prettier ### CSS - Even and Odd rules, applying styling to alternate elements -We will finish off by styling every second child element of our list. -Thanks to some great CSS selectors, this is quite easy to do. +In this part we will apply a different style to every second child element of our list. -We can use +Thanks to the following great CSS selectors, this is quite simple to do. `:nth-child(odd)` and `:nth-child(even)` to do that. @@ -422,81 +415,68 @@ In our case, we only want to change the style of every odd row. Achieving that i background-color: rgba(176, 175, 192, 0.2); } ``` - > Try changing odd to even +### RGB colors and opacity -### Transitions - -Let's take some **property** in our code and change it, making it somehow different. E.g. The `background` of the two links named **btn**, and let's change it on hover. This is a 'change'. Now we can have this affect take place during a number of seconds, this is a **Transition**. -Go ahead and add the selector to the stylesheet. +As you may have just noticed, we didn't define the color as we usually do, using hex codes. Instead, we used **rgba**. This, enables us to define the opacity of a color as well. -```css -a.btn:hover { +`rgba(rgb code, opacity)` - [your property: your value;] - -} -``` +`rgb(176, 175, 192);` is another way of defining the color with the hex code `#b0afc0` -Add the **property** which we are chaning and its new value: +A great way to find both the rgb and hex values of a color is [http://0to255.com](http://0to255.com). -```css -a.btn:hover { - background: black; -}``` +> Try changing the last attribute of the `rgba` we just set. +> What happens when you set it to 1? +> What happens when you set it to 0? -Now create a **Transition** affect: +### Bonus - Transitions -```css -a.btn:hover { - background: black; - transition-duration: 4s; -}``` +Let's take a **property** in our code and give it an animation on hover. We do this by adding a `:hover` to the element you want to effect on hover. -Create another one: +For this example we will give the two links named **btn** a different background on hover. ```css a.btn:hover { - background: black; - transition-duration: 4s; - transition-delay: 1s; -}``` - - - - - - - - - - - - - - - - - + background: black; +} +``` -## But before we end our lesson +> Can you see this change on your website? -### RGB colors and opacity +We can now make this affect take place during a number of seconds by adding the `transition-duration` property. -As you may have noticed, in the last example, we didn't define the color as we usually do, using hex codes. Instead, we used **rgba**. This, enables us to define the opacity of a color as well. +```css +a.btn:hover { + background: black; + transition-duration: 1s; +} +``` -`rgba(rgb code, opacity)` +> Change the duration time to see what happens? +Now let's add a delay property. -`rgb(176, 175, 192);` is another way of defining the color with the hex code `#b0afc0` +```css +a.btn:hover { + background: black; + transition-duration: 1s; + transition-delay: 1s; +} +``` -You can find both the rgb and hex values of a color through [http://0to255.com](http://0to255.com). +If we wanted to even wilder with our on hover effect we could add a rotate: -> Try changing the last attribute of the `rgba` we just set. -> What happens when you set it to 1? -> What happens when you set it to 0? +```css +a.btn:hover { + transform: rotate(90deg); + transition-delay: 1s; +} +``` +Woo, that's it for CSS transitions. If you have some time here is a [guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) where you can sit with your coach and dive a little deeper. ----- + This ends our fifth lesson, we hope you enjoyed it and learnt something. If you have some spare time how about going back through this tutorial and, by yourself, make some amendments. If there is something you did not understand or want to give us some feedback please [send us an email.](mailto:feedback@codebar.io)