Adjust css examples formatting (#26127)
This commit is contained in:
David Way
Tom
@ -48,16 +48,15 @@ You have to add the following CSS property to achieve the transparency levels.
|
||||
opacity:0.0;
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively you can use a transparent rgba value like this:
|
||||
```css
|
||||
|
||||
.class-name{
|
||||
background-color: rgba(0,0,0,.5);
|
||||
}
|
||||
```
|
||||
```
|
||||
The example above sets the background to be black with 50% opacity. The last value of an rgba value is the alpha value. An alpha value of 1 equals 100%, and 0.5 (.5 for short) equals 50%. We use this method to add transparency to an element without affecting the content inside.
|
||||
|
||||
|
||||
#### Transparent Hover Effect
|
||||
The opacity property is often used together with the **:hover** selector to change the opacity on mouse-over:
|
||||
|
||||
@ -88,10 +87,8 @@ Using the rgba value is most preferable when the background has content like tex
|
||||
|
||||
The example above sets the background with a 50% opacity using hex alpha code. The alpha digit is the last two numbers `80`. The formats are sometimes referred to as #RRGGBBAA and #RGBA and the the AA part is a hex representation of 0-100. For example the hex alpha code of 0% is `00` and the hex alpha code of 100% is `FF`.
|
||||
[A codepen example to show hex alpha values](https://codepen.io/chriscoyier/pen/XjbzAW)
|
||||
|
||||
[A codepen example to show background opacity ranges](https://codepen.io/lvcoulter/full/dVrwmK/)
|
||||
|
||||
|
||||
#### More Information:
|
||||
|
||||
+ [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
|
||||
|
||||
@ -9,22 +9,22 @@ The `background-color` property allows you to choose the color of your element (
|
||||
|
||||
Here is an example of setting the background color for a web page to green.
|
||||
```css
|
||||
body {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Here is an example of setting the background colors for two elements. This will set the background of the header
|
||||
to purple and the rest of the page to blue.
|
||||
Here is an example of setting the background colors for two elements. This will set the background of the header to purple and the rest of the page to blue.
|
||||
|
||||
```css
|
||||
body {
|
||||
body {
|
||||
background-color: blue;
|
||||
}
|
||||
h1 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
background–color: purple;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Let's look at some examples:
|
||||
|
||||
p::before {
|
||||
content: "";
|
||||
border: solid 5px #ccc
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
span.comment::before{
|
||||
@ -42,9 +42,9 @@ In the example above we are prepending a grey border before every paragraph elem
|
||||
`::before` is one of the CSS pseudo-elements selectors, which are used to style specified parts of an element. In this case, we can insert content before some HTML element from CSS. Although we will see the content in the page, it is not part of the DOM, what means that we can't manipulate it from Javascript. One trick to solve this handicap: passing the content with a data attribute and use jQuery to manipulate it. Here is an example of use:
|
||||
|
||||
```css
|
||||
p::before {
|
||||
p::before {
|
||||
content: "Hello ";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
|
||||
@ -41,7 +41,6 @@ The `border-style` property can be set to a wide range of different border types
|
||||
- `hidden` - Sets a hidden border.
|
||||
|
||||
Each side of the border doesn't need to match.
|
||||
|
||||
Each side can be styled separately:
|
||||
```css
|
||||
border-top-style: solid;
|
||||
@ -82,7 +81,6 @@ p {
|
||||
|
||||
### Border Color
|
||||
|
||||
|
||||
Now for the creative aspect of CSS Borders! With the use of the `border-color` property, you will be able to create customized borders to fit the flow and layout
|
||||
of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.
|
||||
|
||||
@ -107,7 +105,6 @@ p {
|
||||
```
|
||||
|
||||
### Border-Radius
|
||||
|
||||
The `border-radius` property allows the corners of a border to be rounded. `border-radius` takes a length as its value which determines the degree of curvature for each corner of the element. The length can be in px or %.
|
||||
```css
|
||||
border-radius: 25px;
|
||||
|
||||
@ -14,10 +14,10 @@ A box shadow can be described with several properties including:
|
||||
### Syntax:
|
||||
|
||||
```css
|
||||
div {
|
||||
div {
|
||||
box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
* #### inset (default: none)
|
||||
If not specified, the shadow is assumed to be a drop shadow (as if the box were raised above the content).
|
||||
The presence of the `inset` keyword changes the shadow to one inside the frame.
|
||||
@ -39,11 +39,11 @@ This value is used to set the color of the shadow, usually defined with hex `#00
|
||||
To maximize compatibility, it is recommended that you declare box shadow properties for `moz-appearance` and `webkit`, this extends the normal syntax to:
|
||||
|
||||
```css
|
||||
div{
|
||||
div{
|
||||
box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
|
||||
-moz-box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
|
||||
-webkit-box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
However, this step can be ignored if it is creating confusion, as moz property and webkit property will only work in specific applications such as Firefox, and are not on a standards track.
|
||||
|
||||
@ -7,10 +7,12 @@ A Class Selector is used in a CSS file to apply style to the HTML elements with
|
||||
To select elements with a specific class, we use a full stop `.` or "period" character, with the name of the class.
|
||||
|
||||
For example
|
||||
```css
|
||||
.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
Here, all HTML elements with `class="center"` will be red and center-aligned.
|
||||
|
||||
@ -52,5 +54,3 @@ h1.test, h2.test {
|
||||
**Tips: No space between multiple classes.**
|
||||
#### More Information:
|
||||
CSS Syntax and Selectors: <a href='https://www.w3schools.com/css/css_syntax.asp' target='_blank' rel='nofollow'>w3schools</a>
|
||||
|
||||
|
||||
|
||||
@ -15,11 +15,6 @@ The comment syntax in CSS works for both single and multi-line comments. You can
|
||||
*/
|
||||
|
||||
/* This is a single line comment*/
|
||||
.group:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
```
|
||||
|
||||
By using CSS comments to make your stylesheets more readable, the CSS will be easier to maintain in the future for you or another developer.
|
||||
@ -47,7 +42,7 @@ You can add as many comments to your stylesheet as you like. It’s good practic
|
||||
Comments should be used everyday in your CSS to keep in maintainable and readable by any dev who dives into said CSS.
|
||||
Here are a few exmples to get you started of CSS comments you can use in your daily work to make your life that bit easier.
|
||||
|
||||
``` css
|
||||
```css
|
||||
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
CSS TABLE OF CONTENTS
|
||||
@ -83,11 +78,11 @@ Here are a few exmples to get you started of CSS comments you can use in your da
|
||||
/****************************************************************************
|
||||
6.0 - Body */
|
||||
|
||||
/************************************************************************
|
||||
5.1 - Sliders */
|
||||
/************************************************************************
|
||||
6.1 - Sliders */
|
||||
|
||||
/************************************************************************
|
||||
5.2 - Imagery */
|
||||
/************************************************************************
|
||||
6.2 - Imagery */
|
||||
|
||||
/****************************************************************************
|
||||
7.0 - Footer */
|
||||
@ -115,7 +110,7 @@ Here's how region works:
|
||||
height: 20px;
|
||||
}
|
||||
/*#endregion */
|
||||
````
|
||||
```
|
||||
|
||||
### More Information:
|
||||
|
||||
|
||||
@ -119,7 +119,7 @@ button {
|
||||
|
||||
To animate a button on click use 'button:active':
|
||||
|
||||
```
|
||||
```css
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 15px 25px;
|
||||
@ -167,4 +167,3 @@ In many cases buttons will have to link to an url. As we can't add an href attri
|
||||
#### More Information:
|
||||
* https://www.w3schools.com/css/css3_buttons.asp
|
||||
* https://www.w3schools.com/howto/howto_css_animate_buttons.asp
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ Another common item in languages are loops, something else CSS lacks. Loops can
|
||||
.margin-#{vfoo} {
|
||||
margin: $vfoo 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
This loop saves us from having the to write the same code multiple times to change the margin size.
|
||||
|
||||
@ -47,8 +47,8 @@ Here, the background color will change color depending on the width of the page'
|
||||
|
||||
### Mixins
|
||||
There are probably portions of your styling you would like to reuse. Mixins allow you to group any number of properties under one common name. You declare mixin with the @mixin <name> and use it with the @include <name>.
|
||||
These are but a few of the major functions of CSS Preprocessors. As you can see, CSS Preprocessors are incredibly useful and versitile tools. Many web developers use them, and it is highly recommended to learn at least one of them.
|
||||
|
||||
These are but a few of the major functions of CSS Preprocessors. As you can see, CSS Preprocessors are incredibly useful and versatile tools. Many web developers use them, and it is highly recommended to learn at least one of them.
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
SASS: http://sass-lang.com/
|
||||
|
||||
@ -12,7 +12,7 @@ The CSS `background` shorthand property is used to define multiple properties li
|
||||
The `background-color` property specifies the background color of an element.
|
||||
|
||||
```css
|
||||
background-color : #F00;
|
||||
background-color : #F00;
|
||||
```
|
||||
|
||||
### Background Image
|
||||
@ -22,7 +22,7 @@ The `background-image` property specifies an image to use as background of an el
|
||||
By default, the image repeats itself to cover the entire surface of the element.
|
||||
|
||||
```css
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-image: url("GitHub-Mark.png");
|
||||
```
|
||||
|
||||
### Background Image - Repetition
|
||||
@ -31,14 +31,14 @@ By default, the `background-image` property repeats on the X and Y axis, to cove
|
||||
If you want to set an axis, like X axis, use `background-repeat` property type:
|
||||
|
||||
```css
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-repeat: repeat-x;
|
||||
```
|
||||
|
||||
But sometimes you don't want to have your background image cover the whole surface, so you've to specify it by typing:
|
||||
|
||||
```css
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-repeat: no-repeat;
|
||||
```
|
||||
|
||||
@ -47,7 +47,7 @@ But sometimes you don't want to have your background image cover the whole surfa
|
||||
You can specify the position of the background by typing :
|
||||
|
||||
```css
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position : left bottom;
|
||||
```
|
||||
@ -59,7 +59,7 @@ It will set your background image at the bottom left of the element.
|
||||
If you do not want the background image to scroll with the rest of the page, use the `background-attachement` property:
|
||||
|
||||
```css
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-image: url("GitHub-Mark.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left bottom;
|
||||
background-attachment: fixed;
|
||||
@ -70,7 +70,7 @@ If you do not want the background image to scroll with the rest of the page, use
|
||||
You can pass all the properties in one super-property:
|
||||
|
||||
```css
|
||||
background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
|
||||
background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
|
||||
```
|
||||
|
||||
When you use this shorthand property, it must be in this order:
|
||||
@ -84,7 +84,7 @@ When you use this shorthand property, it must be in this order:
|
||||
It doesn't matter if one property is missing, so long as the order is maintained:
|
||||
|
||||
```css
|
||||
background: url("GitHub-Mark.png") no-repeat left bottom;
|
||||
background: url("GitHub-Mark.png") no-repeat left bottom;
|
||||
```
|
||||
|
||||
This will work even if the color and the attachment are missing.
|
||||
|
||||
@ -21,9 +21,9 @@ The thought process should be:
|
||||
### The basic syntax
|
||||
|
||||
```css
|
||||
@media only screen and (min-width: 768px) {
|
||||
@media only screen and (min-width: 768px) {
|
||||
p {padding: 30px;}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `p` tag will have a padding of 30px as soon as the screen reaches min 768px width.</p>
|
||||
@ -32,9 +32,9 @@ The `p` tag will have a padding of 30px as soon as the screen reaches min 768px
|
||||
|
||||
|
||||
```css
|
||||
@media only screen and (min-height: 768px) and (orientation: landscape) {
|
||||
@media only screen and (min-height: 768px) and (orientation: landscape) {
|
||||
p {padding: 30px;}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `p` tag will have a padding of 30px as soon as the screen reaches min 768px height and its orientation is landscape.
|
||||
@ -42,9 +42,9 @@ The `p` tag will have a padding of 30px as soon as the screen reaches min 768px
|
||||
### The OR syntax
|
||||
|
||||
```css
|
||||
@media only screen and (min-width: 768px), (min-resolution: 150dpi) {
|
||||
@media only screen and (min-width: 768px), (min-resolution: 150dpi) {
|
||||
p {padding: 30px;}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `p` tag will have a padding of 30px as soon as the screen reaches min 768px width or its resolution reaches min 150dpi.
|
||||
|
||||
@ -69,4 +69,3 @@ div.desc {
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
https://www.w3schools.com/css/css_image_gallery.asp
|
||||
|
||||
|
||||
@ -13,10 +13,10 @@ Example:
|
||||
```css
|
||||
img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
Include ```filter: alpha(opacity=x)``` for IE8 and earlier. `x` takes a value from 0-100.
|
||||
Include ```filter: alpha(opacity=x)``` for IE8 and earlier. The x takes a value from 0-100.
|
||||
```css
|
||||
img {
|
||||
opacity: 0.3;
|
||||
@ -59,8 +59,4 @@ img:hover {
|
||||
|
||||
#### More Information:
|
||||
- w3schools.com: [CSS Opacity/Transparency](https://www.w3schools.com/css/css_image_transparency.asp)
|
||||
|
||||
- MDN Web Docs: [Opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ Ideally, when you build a site, you'd design it with Grid and use Flex as a fall
|
||||
To make any element a grid, you need to assign its `display` property to `grid`, like so:
|
||||
|
||||
```css
|
||||
.conatiner {
|
||||
.container {
|
||||
display: grid;
|
||||
}
|
||||
```
|
||||
|
||||
@ -5,7 +5,7 @@ title: The Position Property
|
||||
|
||||
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
|
||||
The position property specifies the type of positioning method used for an element.
|
||||
The position proprty isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow.
|
||||
The position property isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow.
|
||||
|
||||
There are five different position values:
|
||||
|
||||
@ -20,5 +20,3 @@ Elements are then positioned using the top, bottom, left, and right properties.
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
<a href="https://www.w3schools.com/css/css_positioning.asp" target="_blank">The is a good article</a> to read up to understand more about the position property.
|
||||
|
||||
|
||||
|
||||
@ -64,5 +64,3 @@ There are two parts to any navigation: the HTML and the CSS. This is just a quic
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
More Navigation Examples: [W3Schools](https://www.w3schools.com/css/css_navbar.asp)
|
||||
|
||||
|
||||
|
||||
@ -50,10 +50,10 @@ For example, a given block-level element (`<div>`) set to 300px wide, that conta
|
||||
* `overflow-y`: Allows the user to scroll through the content that extends beyond the width of the box.
|
||||
|
||||
```css
|
||||
.box-element {
|
||||
.box-element {
|
||||
overflow-x: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
```
|
||||
And the `.box-element` will look like this:
|
||||
|
||||
|
||||
@ -35,5 +35,3 @@ div {
|
||||
|
||||
#### More Information:
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/background-color?v=b' target='_blank' rel='nofollow'>MDN web docs</a>
|
||||
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ text-shadow : X-offset Y-offset blur-radius color
|
||||
**Example :**
|
||||
``` css
|
||||
p {
|
||||
text-shadow : 2px 2px 8px #FF0000;
|
||||
text-shadow : 2px 2px 8px #FF0000;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ The will-change property allows you to tell the browser what manipulations will
|
||||
|
||||
```css
|
||||
.container {
|
||||
will-change: transform;
|
||||
will-change: transform;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user