CSS Tricks

Published over 6 years ago

---

Just a list of things I've done with CSS that I'd like to keep note of for future styling. Most of these will be in SASS format.

Vertical Centering

Been running into this a lot, helped me center images in middle of the screen even when resizing it. Percentages may need to be adjusted by case scenario along with media queries.

transform: translateY(-50%)
position: absolute
top: 50%

/* OR */

display: flex
flex-direction: column
align-self: center

Dynamically Calculating Height

Instead of using --webkit-fill-available, I've found this to be more dynamic and work on more browsers.

/* offset the height */
height: calc(100% - 167px)

/* normal 100% */
width: calc(100%)

Overlaying an Image

I've needed to overlay many images on top of another upon hover and out, this helped me do it pretty well. Found this here.

.card
  width: 130px
  height: 195px
  position: relative
  display: inline-block
  margin: 50px

.card .img-top
  display: none
  position: absolute
  top: 0
  left: 0
  z-index: 99

.card:hover .img-top
  display: inline

HTML in SLIM for the view.

.card
  = image_tag "images/back.jpg", alt: "Card Back"
  = image_tag "images/front.jpg", class: "img-top", alt: "Card Front"

Hexagon Button

.hex-button
  position: relative
  display: block
  width: 146px
  height: 54px
  line-height: 62px
  text-align: center
  font-size: 22px
  text-decoration: none
  text-transform: uppercase
  margin: 40px auto
  font-family: $yourfont

.hex-button:before, .hex-button:after 
  width: 166px
  left: -10px
  height: 28px
  bottom: 29px

.your-btn-color
  color: $yourcolor

.your-btn-color:before, .your-btn-color:after 
  border: 3px solid $yourcolor

.hex-button:before
  position: absolute
  content: ''
  border-bottom: none
  -webkit-transform: perspective(7px) rotateX(5deg)
  -moz-transform: perspective(7px) rotateX(5deg)
  transform: perspective(7px) rotateX(5deg)  

.hex-button:after
  position: absolute
  content: ''
  border-top: none
  -webkit-transform: perspective(7px) rotateX(-5deg)
  -moz-transform: perspective(7px) rotateX(-5deg)
  transform: perspective(7px) rotateX(-5deg)
  top: 30px

.hex-button:hover
  color: $yourcolor
  background: $yourcolor

.hex-button:hover:before, .hex-button:hover:after
  border-right: 24px solid $yourcolor
  border-left: 24px solid $yourcolor

CSS Table Border Arrow

td:first-child:before
  content: '»'
  opacity: 0  
  color: orange
  transition: 0.5s

tr:hover
  td:first-child:before
    opacity: 1
    margin-right: 8px

Bootstrap Accordian Plus and Minus

.panel-heading h4 a:after
  content: '-'
  float: right
  font-size: 28px
  margin-top: -2px
  margin-right: 20px

.panel-heading.collapsed h4 a:after
  content: '+'
  float: right
  font-size: 28px
  margin-top: -2px
  margin-right: 20px

Table Striping

tr:nth-child(even)
  background-color: #000000

tr:nth-child(odd)
  background-color: #010101

Bottom Footer

html
  height: 100%

body
  margin: 0
  position: relative
  min-height: 100%
  background-color: #332D2E

footer
  background-color: #1a1a1a
  width: 100%
  display: flex
  position: absolute
  bottom: 0
  z-index: 1

Black Overlay on Image

Place the image on the show page with an inline background-url attribute on the parent div if the background is dynamic or in the sass file if it is not.

.parent-dive
  position: relative
  height: 700px
  background-size: cover
  .child-div
    width: 100%
    height: 100%
    background: rgba(0, 0, 0, .6)
    text-align: center
    align-items: center
    display: flex

Scrollbar

If you want to hide or show a specific scrollbar color, here are some of the classes you'll want to change. You'll want to nest the css within a class and include the & as to not overwrite all of the scrollbars on your site, unless that is the intention.

.my-class
  &::-webkit-scrollbar
      width:

  &::-webkit-scrollbar-track
    -webkit-box-shadow:
    background-image:
    border-right:
    border-left:

  &::-webkit-scrollbar-thumb
    background:
    -webkit-box-shadow:
    max-height:
    height: