DEV Community: Joelle

How to draw a box on hover with CSS

Joelle — Fri, 03 Jan 2020 15:05:27 +0000

Hey everyone, I recently learned how to draw a box on hover using CSS and thought I would make a quick tutorial about it.

First you'll need a word or link to hover over. In the example below I'll be using a class called .navA, here is what the html for this could look like.

<a>Hover</a>

Next you'll want to open a css file that is connected to either your html file or your component if you're using react. We will use transition to draw the box over time. I want to draw my box starting from the bottom and go left to right. So first i'll write out transition and give it a border-bottom and then I can set how long it will take for that part of the border to show up. Repeat this step for each side of the border.

.navA {
  text-decoration: none;
  transition: border-bottom .2s, border-left .4s, border-top .6s, border-right .9s;

}

Cool now you know how to draw a box on hover with CSS. Play around with it and try changing the colors.

Make your cards pop on hover with CSS

Joelle — Mon, 30 Dec 2019 02:25:29 +0000

If you've ever wanted to change the color or opacity of something when you hover the mouse over it then this short tutorial is for you!

First let's create a div and a card.

  <div class="container">
     <div class="card"> 
       <h1>I'm a card!</h1>
      </div>
   </div>

Next let's style the card. We will give it a border and change the sizing as well as centering the text.

 .card {
    border: 3px solid black;
    background-color: green;
    width: 400px;
    height: 200px;
    opacity: 80%;
 }


 .card h1 {
    text-align: center;
 }

Now we can add changes on hover let's make the border thicker and change the opacity to 100% when the mouse hovers over the card. We can do this using :hover. Make sure you don't add a space between :hover and the class name. If you add a space it wont work properly.

 .card:hover{
    border: 8px solid black;
    background-color: green;
    opacity: 100%;
 }

Now when we hover over the card it changes!

How to add words inside a border in CSS

Joelle — Mon, 30 Dec 2019 01:59:05 +0000

I recently figured out how to put words into a border and thought I'd make a short tutorial on how to do it.

First you'll need to create a border. Let's create a Div to add a border to.

<div class="border"><h1 class="words">Look at this div</h1></div>

Now let's give it a border using CSS. We will also add some margin spacing and change the width and height of the div.

 .border {
     border: 2px solid black;
     margin: 100px 100px 100px 100px;
     width: 600px;
     height: 400px;

 }

Next we will want to style the h1, we will give it a negative top margin so it will be within the border line, we will also give it a background color of white so the line behind it disappears. We set the left margin to 10px so the words aren't completely on the left side of the div, and finally we set the width to 220px so the entire top border line doesn't disappear.

 .words {
     margin-top: -17px;
     margin-left: 10px;
     background: white;
     width: 220px;
 }

How to create cards on a grid with CSS

Joelle — Mon, 30 Dec 2019 01:41:43 +0000

Recently I've heard people having trouble creating cards on a grid in css, so I decided to make a quick tutorial to show you how to do that.

First you'll want to create a div to be the container for the grid and connect your css file to your html file or react component if you're using react.

<div class="cardContainer">



</div>

Let's go ahead and add some cards into our container.

<div class="cardContainer">
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
  </div>

Next open your css file and set your display to grid, create margin spacing, and create your grid columns.

.cardContainer {

    margin: 100px 100px 100px 100px;
    display: grid;

    /* you can change the 4 below to 3 if you only want 3 cards per row */
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px;
}

Now you'll want to style your cards. You can make them any size you want, heres an example of some cards.

.card {
    width: 300px;
    height: 200px;
    color: white;
    background-color: red;
    text-align: center;
 }

Cool now we have some cards on a grid. Play around with the sizing and see what you can create!

How to connect CSS files to React components

Joelle — Fri, 06 Dec 2019 01:04:34 +0000

I recently learned React and realized it's completely different using CSS with React as opposed to vanilla javascript or html.

In React you'll need to import your CSS file into the component you want to style directly.

Let's say this is our CSS file. The goal here is to change the color of the text in our component. Let's assume we will have the class "text" already available.

.text {
  color: green;
}

You'll want to import your CSS file directly into the component you want to style.

import React, { Component } from 'react';
import './Example.css'

class Example extends Component {


    render() {
        return (
            <div>
                <h1 className="text">Hello</h1>
            </div>
        );
    }
}

export default Example;

Cool now our text is green!

CSS basics

Joelle — Fri, 15 Nov 2019 22:32:10 +0000

Hello, the purpose of this blog is to show people how to add CSS to an HTML file and how to select elements.

First you'll need to add this to your HTML file.

<link rel="stylesheet" type="text/css" href="style.css">

href="style.css"

style.css is the name of my CSS file in this example.

Awesome now your HTML and CSS is connected. What next?

Let's say this is your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Document</title>
</head>
<body>


    <div class="div-class">
        <card>
            <p id="p-tag">
                </p>
            </card>
        </div>

</body>
</html>

To select the div we can use the class selector. This will change any elements with the same class name.

.div-class {}

To select the card we can use the element selector. This will change any elements of the same tag name.

card {}

To select the p tag we can use the id selector. This will only change the element with the selected id.

#p-tag {}

Once you have something selected to change you can do some cool things such as changing their color.

#p-tag {
color: green;
}

Play around with CSS and see what you can make!

Evolve from .each with these helpful enumerables

Joelle — Wed, 02 Oct 2019 14:17:21 +0000

`|map|`

Ruby's #map is an extremely useful upgrade from using #each. Not only is it less code to write but it also looks much cleaner. Check out these examples of what #map can do in the place of #each.

  rainbow = ["red", "orange", "yellow", "green", "blue", "purple"]

  colors = []
  rainbow.each{ |color| colors << color.upcase }
  colors
  # returns ["RED", "ORANGE", "YELLOW", "GREEN", "BLUE", "PURPLE"]


  rainbow.map{ |color| color.upcase }
  # returns ["RED", "ORANGE", "YELLOW", "GREEN", "BLUE", "PURPLE"]

Pretty cool right! Ruby's #map returns a new array without changing the original one. If you were to use #each you would need to create an empty array to shovel or push the altered values into. You can use map to grab all of the things!

`|select|`

What if you just wanted to grab specific things instead of mapping all of the things? Well you actually can with #select!

   colors = []
   rainbow.each do |color| 
     if color.length > 5
       colors << color
     end
   end
   colors
   # returns ["orange", "yellow", "purple"]


   rainbow.select{ |color| color.length > 5 }
   # returns ["orange", "yellow", "purple"]

In this example we only grab colors with a length greater than 5. When using #select a new array will be created and populated with the values we specify.

`|max_by|`

What if you want to grab the largest thing? You can use #max_by to grab the max value of something.

   rainbow = ["red", "orange", "yellow", "green", "blue", "purpleee"]

   longest = ""
   rainbow.each do |color|
     if color.length > longest.length
       longest = color
     end
   end
   longest
   # returns "purpleee"


   rainbow.max_by{ |color| color.length }
   # returns "purpleee"

You can also specify how many values you want returned. The values returned are similar to using #sample so the order will be random.

   rainbow = ["red", "orange", "yellow", "green", "blue", "purple"]

   colors = []
   longest = ""
   second_longest = ""
   third_longest = ""
   rainbow.each do |color|
     if color.length >= longest.length
       third_longest = second_longest
       second_longest = longest
       longest = color
     end
   end
    colors.push(longest, second_longest, third_longest)
    colors
    # returns ["purple", "orange", "yellow"]


   rainbow.max_by(3){ |color| color.length }
   # returns ["purple", "orange", "yellow"]

If our array looked like this ["red", "orange", "yellow", "greenn", "blue", "purple"] then any combination of 3 of these ["yellow", "greenn", "orange", "purple"] could have been returned.

`|include?|`

What if we wanted to find out if our rainbow array has a certain color? We can do that by using #include?.

   rainbow.each do |color| 
     if color == "purple" 
       true
     else
       false
     end
   end
   # returns true


   rainbow.include?("purple")
   # returns true

   rainbow.include?("pink")
   # returns false

Keep in mind that include? returns true or false and not a new array.

`The magic of & with enumerables.`

We can even use this shorthand with enumerables when we don't need to pass in any arguments. This really blew my mind when I found out about it.

   rainbow.map(&:upcase)
   # take note that the usual squigglys{} are now parentheses().
   # returns ["RED", "ORANGE", "YELLOW", "GREEN", "BLUE", "PURPLE"]