From c0810a937baddc332cc2c9f033a8797ef6b92f02 Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Sat, 12 Jan 2019 21:18:53 +0000 Subject: [PATCH] Travis build: 138 [cron] --- docs/index.html | 6 ++---- index.html | 8 ++------ 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/docs/index.html b/docs/index.html index 9aa4eb2c7..a7280097a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -49,9 +49,7 @@ .content-box { box-sizing: content-box; } -

Demo

border-box
content-box

Explanation

  1. box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.
  2. box-sizing: inherit makes an element respect its parent's box-sizing rule.

Browser support

95.9%

✅ No caveats.

Button border animationanimation

Creates a border animation on hover.

HTML

<div class="button-border">
-  <button class="button">Submit</button>
-</div>
+

Demo

border-box
content-box

Explanation

  1. box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.
  2. box-sizing: inherit makes an element respect its parent's box-sizing rule.

Browser support

95.9%

✅ No caveats.

Button border animationanimation

Creates a border animation on hover.

HTML

<div class="button-border"><button class="button">Submit</button></div>
 

CSS

.button {
   background-color: #c47135;
   border: none;
@@ -87,7 +85,7 @@
   height: 100%;
   width: 100%;
 }
-

Demo

Explanation

Use the :before and :after pseduo-elements as borders that animate on hover.

Browser support

99+%

✅ No caveats.

Calc()other

The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.

HTML

<div class="box-example"></div>
+

Demo

Explanation

Use the :before and :after pseduo-elements as borders that animate on hover.

Browser support

99+%

✅ No caveats.

Calc()other

The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.

HTML

<div class="box-example"></div>
 

CSS

.box-example {
   height: 280px;
   background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
diff --git a/index.html b/index.html
index 9b1ab092d..217b0c76b 100644
--- a/index.html
+++ b/index.html
@@ -242,9 +242,7 @@
           

Button border animationanimation

Creates a border animation on hover.

-

HTML

<div class="button-border">
-  <button class="button">Submit</button>
-</div>
+            

HTML

<div class="button-border"><button class="button">Submit</button></div>
 

CSS

.button {
   background-color: #c47135;
@@ -284,9 +282,7 @@
 

Demo

-
- -
+