Bootstrap Mixins Training Videos for Beginner - PowerPoint PPT Presentation

About This Presentation
Title:

Bootstrap Mixins Training Videos for Beginner

Description:

Learn Bootstrap mixins concepts like creating rounded images, gradients, animations, transitions, transformations,applying shadows to the text or HTML elements, also access free resources like videos, online, classroom tutorials of bootstrap. – PowerPoint PPT presentation

Number of Views:44

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com