Let’s see Articles, Buttons and Images parameters.
They are represented on different tabs as shown in the following picture.
Here we will define all elements. First, you have to define the border of the element, then the style of the text and to finish the hover parameters (changes of style when the mouse is over).
Each element (image, article and button) is included in a container. You can create a border around an image, an article or a button and design it.
cursor: Select the cursor type when your mouse is over. |
border-radius:Select the size of the rounder corner |
border-style: Select the style of the border |
border-width: Select the border width in pixel |
border-color: Select the border color |
box-shadow: Define the shadow of the item. Inner shadow can also be applied |
Text parameters are all parameters to customize the text, ONLY FOR AN ARTICLE OR A BUTTON! In fact you can control all its apparence, font family, size, color, etc.
color: Select the color of the text |
font-size: Select the size in of the font in pixel |
font-family: Select the web font family |
font-weight: Select the font weight |
font-style: Select the style of the font |
text-align: Select the horizontal alignment of the text in the item |
text-decoration: Select the text’s decoration |
text-transform: Select the capitalization of the text |
padding: Select the size of the area around the text in the item. |
Hover parameters are the style changes of an element when the mouse is over. With these parameters you can create changes of CSS style, like color, border, opacity, etc.
But you can also add CSS3 parameters that allow little animations.
color:hover: Select the text color when your mouse is over |
text-decoration:hover: Select the text decoration when your mouse is over |
background-color:hover: Select the background color when your mouse is over |
background-image:hover: Select the background image when your mouse is over |
border-style:hover: Select the border style when your mouse is over |
border-width:hover: Select the border width when your mouse is over |
border-color:hover: Select the border color when your mouse is over |
opacity:hover: Select the opacity when your mouse is over |
transition-delay: Define when the transition effect will start |
transition-timing-function: Define the fluidity for the transition effect |
transition-duration: Define a duration for the transition effect |
transition-property: Define the style element on which the transition effect will be applied |
rotate:hover: Define in degree the rotation angle on mouseover. The values are between 180° and -180° |
scaleY:hover: Define a vertical scale on mouseover. This may be an extension or shortening |
scaleX:hover: Define an horizontal scale on mouseover. This may be an extension or shortening |
translateY:hover: Define a vertical move on mouseover |
translateX:hover: Define an horizontal move on mouseover |
