+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: HTML & CSS Tutorials | The warning boxes. (/Thread-HTML-CSS-Tutorials-The-warning-boxes)
HTML & CSS Tutorials | The warning boxes. - Kotomi - 08-25-2015
Hello, today we'll be going over the basic warning boxes
This is the final product.
Spoiler:
![[Image: a99a37759a3c9af4cdc4a749bd31a0f5.png]](https://i.gyazo.com/a99a37759a3c9af4cdc4a749bd31a0f5.png)
So let's get started.
First off you're going to want to open up your preffered text editor, I'm using Brackets.
You'll start with a blank canvas, we in the design community love this because it means much typing
Spoiler:
![[Image: 6db8118bfb61075583533e9452c0481c.png]](https://i.gyazo.com/6db8118bfb61075583533e9452c0481c.png)
You'll need to add
<DOCTYPE HTML>
</DOCTYPE>
To tell the browser it's an HTML file, not just a text document.
Once you're done that I prefer to give our Pandora a head.
In her head we'll implant the knowledge of our CSS file.
To do so we'll type.
<head>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<title>Azzurra Web Design | Just ~ Elegance</title>
</head>
We've also given her a very nice title
She's looking a bit bland though, so let's give her a NICE body!
We'll also want to add a couple <div> or divider tags, Using Div tags is the best way to keep everything nice and clean!
Let's see.
Spoiler:
![[Image: f77ee292f2fa190b9d2cdcc7ef8dfa08.png]](https://i.gyazo.com/f77ee292f2fa190b9d2cdcc7ef8dfa08.png)
Now we should always give her some feet.
Spoiler:
![[Image: e64d733e12d4f88d50e71a7f566e5474.png]](https://i.gyazo.com/e64d733e12d4f88d50e71a7f566e5474.png)
OK, now if you've done all of this and only see "warning" and "Success" printed onto your screen, don't panic! We haven't given Pandora any makeup
Let's give her some nice body gel ^,^
![[Image: c6c1aaf5a01d8c15fc9fb5854831e689.png]](https://i.gyazo.com/c6c1aaf5a01d8c15fc9fb5854831e689.png)
You can use any color you want.
Now we need to give her some nice looking divs. and a good size font!
![[Image: 0fdcc5308c153a2e3c65cc61b78d2518.png]](https://i.gyazo.com/0fdcc5308c153a2e3c65cc61b78d2518.png)
![[Image: 2d4ccce8ebf5aa1186cdb68ac704d633.png]](https://i.gyazo.com/2d4ccce8ebf5aa1186cdb68ac704d633.png)
We use "em" because it will automatically pick the best size based on the device/screen resolution viewing, meaning that it won't make the div annoyingly big on an iPhone
The colors are yours too.
Now, let's give her a foot massage!
![[Image: 27556a86e5ae4c481c6cc3fceebef23e.png]](https://i.gyazo.com/27556a86e5ae4c481c6cc3fceebef23e.png)
Bottom:0; mixed with position: fixed; will lock her feet to the ground!
The colors and shadow are your choice
Stay tuned, next time we'll be going over how to make them disappear when you click on them ;D
RE: HTML & CSS Tutorials | The warning boxes. - Man - 08-25-2015
I suggest you put the code in code tags but other than that, shit nice tutorial.
RE: HTML & CSS Tutorials | The warning boxes. - Kotomi - 08-25-2015
(08-25-2015, 12:46 AM)Man Wrote: I suggest you put the code in code tags but other than that, shit nice tutorial.
The fuck, I ain't makin no skids.
RE: HTML & CSS Tutorials | The warning boxes. - Oxyrus - 08-25-2015
I would change the font used, the colour for both, box and text and it's size. Other than that, good tutorial.
RE: HTML & CSS Tutorials | The warning boxes. - Kotomi - 08-25-2015
(08-25-2015, 12:56 AM)Oxyrus Wrote: I would change the font used, the colour for both, box and text and it's size. Other than that, good tutorial.
I'd usually use a more modern font and the colors I don't usually think about until I have a general feel for where a project is going.
But the point of this tutorial is for new people interested in web design to start to get a general feel for the field
RE: HTML & CSS Tutorials | The warning boxes. - Oxyrus - 08-25-2015
I would use something like http://codepen.io/anon/pen/NqQaOy but with a jQuery fade out effect.