Skip to content

Sstudiosdev-lib-css v1.0.2

Latest
Latest
Compare
Choose a tag to compare
@Sstudiosdev Sstudiosdev released this 20 Apr 05:08
1.0.1
e67152c
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

CSS Animations

Keyframes Animations

  • fadeIn: Opacity transitions from 0 to 1.
  • fadeOut: Opacity transitions from 1 to 0.
  • shake: Element moves laterally from left to right and vice versa.
  • bounce: Element bounces vertically.
  • pulse: Element opacity alternates between 1 and 0.5.
  • spin: Element rotates 360 degrees continuously.
  • slideIn: Element slides in from the left.
  • slideOut: Element slides out to the left out of view.
  • flash: Element opacity alternates between 1 and 0 several times.
  • rubberBand: Element stretches and shrinks elastically.
  • swing: Element oscillates at specified angles.
  • wobble: Element sways forward and backward.
  • rollIn: Element rolls in from the left while rotating.
  • rollOut: Element rolls out to the right while rotating.
  • heartBeat: Element expands and contracts in a heartbeat pattern.
  • tada: Element scales and rotates irregularly.
  • jello: Element wobbles and distorts irregularly.
  • jackInTheBox: Element appears small and rotates upwards as it grows.
  • puffIn: Element appears with a scale from 2 to 1.
  • puffOut: Element disappears with a scale from 1 to 2.
  • fadeInDown: Element appears sliding in from the top.
  • fadeOutUp: Element disappears sliding up.
  • rotateIn: Element appears rotating from -200 degrees.
  • rotateOut: Element disappears rotating to 200 degrees.

Animated Button Styles

  • btn-GlowHover: Soft glow effect on hover.
  • btn-scale: Button enlarges on hover.
  • btn-shadow: Button casts shadow on hover.
  • btn-pulse: Button with continuous pulsing effect.
  • btn-bounce: Button slightly bounces on hover.

CSS Styles

Color Variables

  • --color-primary: #6EE7B7
  • --color-primary-hover: #50c998

General Styles

  • *: margin and padding set to 0, box-sizing set to border-box
  • body: font, color, and line-height
  • .container: max-width, margin, and padding

Button

  • .btn: button style and hover transition

Card

  • .card: card background and shadow, hover transition
  • .card-header: header padding and background
  • .card-body: body padding

Form

  • .form-group: margin bottom
  • .form-label: label style
  • .form-input: input style

Heading

  • .h1: margin bottom

Navbar

  • .navbar: navbar style and hover transition
  • .navbar-brand: brand style and hover transition
  • .navbar-menu: menu style
  • .navbar-menu li a: menu link style and hover transition

Alert

  • .alert: alert style and transition
  • .alert-success, .alert-warning, .alert-error: specific alert styles

Progress Bar

  • .progress-bar: progress bar style
  • .progress-bar-fill: progress bar fill style and transition

Tabs

  • .tab: tab style
  • .tab button: tab button style and hover transition
  • .tabcontent: tab content style

Custom List

  • .custom-list: list style and hover transition
  • .custom-list li::before: list bullet style and hover transition

Tag Container

  • .tags-container: tag container style
  • .tag: tag style and hover transition
  • .tag::after: tag delete button style and hover transition

Flip Card

  • .flip-card: flip card style
  • .flip-card-inner: flip card inner content style and hover transition
  • .flip-card-front, .flip-card-back: front and back styles of flip card
Assets 3
Loading