BIZAGI BPM

Actividades pendientes

Designing with CSS
button design example
Add to Cart ➜
Style it yourself
Button Text ➜
TIP: This button already has a class ”Button” with some basic styles. Select the button and try to add the gradient, border, rounded corners, inside/outside shadows, hover state styles, and transition for the hover styles – all using the style panel.
What you created
Button Text ➜
apply the ‘button’ class
Button Text
TIP: In web design you can apply a class to many elements to make them look the same. Apply the “Button” class that you styled to the link above by clicking the [+] at the top of the Style panel and typing “Button” to find that class. 
Form Design example

Thanks!

Your rock my socks!

Oops! Something went wrong while submitting the form :(

Style it yourself

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

TIP: First create classes for the text fields and button (apply the same class to both fields). Then change border styles, background color, and add styles for the hover & pressed states. Don’t forget to style the “Success” state for the Form element, found in the settings panel (Gear Icon in top right). 
#4 Layout with CSS

Building web layouts with CSS

Similar to adding style to an element, to change the position of an element first add a class and then edit the position properties. You’ll learn about Margin, Padding, Display, Float, Overflow, and Position. 

‘Display: Block’ examples

This heading is set to Display: Block

This paragraph is set to Display: Block. So it fills the width of the parent window and stacks on top of other blocks. 

Button with Display: BlockButton with Display: BlockThis link is set to Display: BlockThis link is set to Display: Block
Description: Setting elements’ Display Setting to Block will make them stack on top of each other and fill 100% the width of its parent block. Most elements actually have this setting by default. 
Make them ’Display:Block’ yourself
This is a ButtonThis is a ButtonLinks are Display: Inline by defaultLinks are Display: Inline by default
TIP: Select these elements (some are Inline Block and some are Inline) and make them Display: Block so that they stack on top of each other. 
‘Display: inline-block’ example
DownloadEditDelete
Description: Setting elements’ Display Setting to Inline-Block will make the width of the block conform to the width of the contents inside it. That means if their content is small enough they can stack next to each other. You can copy paste the buttons above and edit the text inside to see how it works.
make them inline-block yourself
DownloadEdit
TIP: Select the elements above and make them Display: Inline-block so they stack next to each other. You’ll see that the images stack next to the buttons. Tip: Dropping the buttons and images into separate Div Blocks will make them stack on top of each other (because Div Blocks are Display: Block by default).
Float example

Join Our Newsletter

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Description: Setting Display: Inline-Block or Floating (this example) are the most common ways to stack elements side by side. In this example I’ll show you how to float something. 
Float it yourself

Join Our Newsletter

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

TIP: First select the text field, make it Float: Left and give it a percentage width (ex: 60%). Then set the button to Float: Left as well and set another percentage width (ex: 40%) so they both add up to 100%. That’s a manual way to force any element to stack side by side.