Bootstrap Mixins Training Videos for Beginner

1
Bootstrap Mixins Training Videos for Beginners by
2
Highlights

• Rounded Corners
• Gradients
• Transformations
• Transitions
• Drop Shadows
• Animations

3
Rounded Corners

• .img-rounded class uses to create rounded corners
  for an image.
• Syntax ltimg srcstatue.jpg" class"img-rounded" 
  altstatue"gt
• Bootstrap also provides classes to create
  circular images, thumbnail images, they are
• .img-circle shapes the image to a circle.
• .img-thumbnail shapes the image to a thumbnail.

4
Gradients

• Gradients allows to create background image with
  two or more specified colors.
• Bootstrap CSS provides two types of gradients,
  they are linear, radical gradients
• Linear Gradients mix colors up-down, right-left
  or diagonally.
• Radial Gradients defined by their center.
• Syntax background linear-gradient(direction, col
  or1, color2, ...)

5
Transformations

• Transforms allow you to translate, rotate, scale,
  and skew elements.
• Bootstrap supports 2D and 3D transformations.
• translate(), rotate(), scale(), skewX(), skewY(),
  matrix() are 2D transformations.
• translate() method moves elements from their
  current positions.
• rotate() method rotates elements clockwise or
  anti-clockwise at certain degree.
• scale() method increases or decreases the size of
  an elements.
• skewX() method skews elements along X-axis,
  skewY()  method skews an element along the Y-axis
  by the given angle.

6
Transformations

• matrix() method combine all the 2D transform
  methods into one.
• rotateX(), rotateY(), rotateZ() are the methods
  to perform 3D transformations.
• rotateX() method rotates an element around its
  X-axis, rotateY() method rotates an element
  around its Y-axis, rotateZ() method rotates an
  element around its Z-axis.
• Syntax div  -webkit-transform rotateY(180deg)
   / Chrome /     transform rotateY(180deg)
  

7
Transitions

• Transitions allows to change elements property
  values.
• EX Increasing elements size automatically
  whenever user keeps the curser.
• To create a transition effect, one should mention
  CSS property, duration of the effect.
• If the duration is not mentioned, the transition
  will have no effect.
• Syntax div   width 50px   height 50px    
  background green     -webkit-transition width
  4s / Chrome /     transition width 4s
      

8
Drop Shadows

• Adds shadow to text or elements.
• Bootstrap CSS provides two properties, they are
  text-shadow and box-shadow.
• text-shadow property applies shadow to the
  selected text.
• Syntax h4    color yellow text-shadow 5px
  5px
• We can also apply multiple shadows to the one
  text.
• CSS3 box-shadow property applies shadow to
  elements in a box.
• Syntax div  box-shadow 10px 10px
       

9
Animations

• Animations allows developers to animate HTML
  elements.
• Element gradually change from one style to
  another.
• _at_Keyframes is the major rule for animation which
  holds various styles.
• Syntax _at_keyframes example from background-color
   green
• tobackground-color orange
• Animation duration is a property to keep the time
  for animation effect.
• Animation-delay property specifies a delay for
  the start of an animation.        

10
Feedback
Like It ? Hate It?
We would love to hear from you whatever you think
about the course.
Click HERE to share what you think!
11
Thank you
Thank You for Watching Bootstrap Mixins Training
Videos for Beginner by
http//www.courseing.com