](https://brandonrozek.com/wp-content/uploads/2015/04/responsivelayoutequation.gif){.broken_link} where a is the start pixel b is the end pixel c is the start media query d is the end media query and X is the screen width out of 100 otherwise known as 1vw \*\*Don’t forget to keep track of your units!! Whether it’s px/rem/em/etc.\*\* Say I want to push a box towards the right a minimum of 5px, a maximum of 20px and for the push to vary between the widths 400-800px. Then I would write…
+There are many occasions where I want an element on the page to move between two points. The navigation in the header of my site (at the time of writing) is a great example of this. So knowing the two points I want it to lie between and having the screen width as the variable, I can plug in… [](https://brandonrozek.com/wp-content/uploads/2015/04/responsivelayoutequation.gif){.broken_link} where a is the start pixel b is the end pixel c is the start media query d is the end media query and X is the screen width out of 100 otherwise known as 1vw \*\*Don't forget to keep track of your units!! Whether it's px/rem/em/etc.\*\* Say I want to push a box towards the right a minimum of 5px, a maximum of 20px and for the push to vary between the widths 400-800px. Then I would write…
```css
@media (min-width: 400px) and (max-width: 800px) {
@@ -62,12 +62,12 @@ That would only make it vary between 400-800px. Now we need to include what happ
}
```
-This is exactly like Mike’s pen, but instead he uses the equation to adjust the font-size between an upper and lower bound. You can apply this method to anything that accepts calc() and viewport units. Here is my [pen](http://codepen.io/brandonrozek/pen/JoQVEb){.broken_link} showing some use cases. To make your life easier, I made a quick little tool where you can input the variables and it will provide you with a simpler form of the equation to put into your calc() function [here](http://codepen.io/brandonrozek/pen/KpPwGL){.broken_link}.
+This is exactly like Mike's pen, but instead he uses the equation to adjust the font-size between an upper and lower bound. You can apply this method to anything that accepts calc() and viewport units. Here is my [pen](http://codepen.io/brandonrozek/pen/JoQVEb){.broken_link} showing some use cases. To make your life easier, I made a quick little tool where you can input the variables and it will provide you with a simpler form of the equation to put into your calc() function [here](http://codepen.io/brandonrozek/pen/KpPwGL){.broken_link}.
#### Animation
-This is where the majority of my research went towards. It’s not as practical as say positioning an element is but I find it interesting. Like, what if I can manipulate the acceleration of the function? [
](https://brandonrozek.com/wp-content/uploads/2015/04/accelerationequation.gif){.broken_link} Where a is the start unit b is the end unit c is the start time d is the end time n is the acceleration modifier and X is time The interesting part of the function here is the n. If I keep n at 1, then the acceleration is constant. If it’s less than one, then it’s fast in the beginning and slows down at the end. If it’s greater than one, then it’s the opposite. I also made a little pen [here](http://codepen.io/brandonrozek/pen/RNzdOV){.broken_link} to demo this for you.
+This is where the majority of my research went towards. It's not as practical as say positioning an element is but I find it interesting. Like, what if I can manipulate the acceleration of the function? [](https://brandonrozek.com/wp-content/uploads/2015/04/accelerationequation.gif){.broken_link} Where a is the start unit b is the end unit c is the start time d is the end time n is the acceleration modifier and X is time The interesting part of the function here is the n. If I keep n at 1, then the acceleration is constant. If it's less than one, then it's fast in the beginning and slows down at the end. If it's greater than one, then it's the opposite. I also made a little pen [here](http://codepen.io/brandonrozek/pen/RNzdOV){.broken_link} to demo this for you.
#### Conclusion
-Having a function that goes between two points is incredibly handy. Now when it comes to positioning, I don’t have to guess which values match the design. If i cant something to be between here and there fluidly, I can do it. What about animation? Chaining them together should have an interesting affect… P.S For those of you crazy people who like to see the theory behind the math, (like myself) I have my scanned work [here](/blog/2015-04-16-function-two-points-theory/).
\ No newline at end of file
+Having a function that goes between two points is incredibly handy. Now when it comes to positioning, I don't have to guess which values match the design. If i cant something to be between here and there fluidly, I can do it. What about animation? Chaining them together should have an interesting affect… P.S For those of you crazy people who like to see the theory behind the math, (like myself) I have my scanned work [here](/blog/2015-04-16-function-two-points-theory/).
\ No newline at end of file
diff --git a/content/blog/2015-05-23-animatable-border.md b/content/blog/2015-05-23-animatable-border.md
index f10e44e..54961cf 100644
--- a/content/blog/2015-05-23-animatable-border.md
+++ b/content/blog/2015-05-23-animatable-border.md
@@ -18,11 +18,11 @@ mf2_cite:
- 'a:1:{s:6:"author";a:0:{}}'
tags: ["Web", "CSS"]
---
-This is part 1 of an animation series I’m doing. It is inspired by Lea Verou’s talk called “[The Humble Border-Radius.](https://www.youtube.com/watch?v=JSaMl2OKjfQ)” I looked at her site and she has a good demo of a bunch of different animations [here](http://lea.verou.me/2011/10/animatable-a-css-transitions-gallery/). My goal here is to create a more comprehensive guide to these different animatable properties–mainly for future reference. Animations play a big part in adding interactivity to the web, so why not explore some possible options?
+This is part 1 of an animation series I'm doing. It is inspired by Lea Verou's talk called “[The Humble Border-Radius.](https://www.youtube.com/watch?v=JSaMl2OKjfQ)” I looked at her site and she has a good demo of a bunch of different animations [here](http://lea.verou.me/2011/10/animatable-a-css-transitions-gallery/). My goal here is to create a more comprehensive guide to these different animatable properties–mainly for future reference. Animations play a big part in adding interactivity to the web, so why not explore some possible options?
-This post follows well along with my Codepen [demo](http://codepen.io/brandonrozek/full/waWMWR/){.broken_link}, where I’ll state the box number that applies to what I’m talking about. \*\*Initial values must be explicitly stated, implicit initial values are generally ignored in animation\*\* \*\\*\*In English terms, you must have already stated a value for what you are animating before you animate it\*\**
+This post follows well along with my Codepen [demo](http://codepen.io/brandonrozek/full/waWMWR/){.broken_link}, where I'll state the box number that applies to what I'm talking about. \*\*Initial values must be explicitly stated, implicit initial values are generally ignored in animation\*\* \*\\*\*In English terms, you must have already stated a value for what you are animating before you animate it\*\**
### Border-color {#border-color}
@@ -30,7 +30,7 @@ This post follows well along with my Codepen [demo](http://codepen.io/brandonroz
* Each value corresponds to each side of the border (starting from the top and going clockwise)
* Initial Value: currentColor
-Border-color animates by splitting the colors to their red, green and blue components and raises/lowers them to it’s new value. ([Demo](http://codepen.io/brandonrozek/pen/PqzPMe){.broken_link}) ([Spec](http://www.w3.org/TR/css3-transitions/#animtype-color)) Example of animation corresponds to #1 in the pen, but I will rewrite the relevant code here.
+Border-color animates by splitting the colors to their red, green and blue components and raises/lowers them to its new value. ([Demo](http://codepen.io/brandonrozek/pen/PqzPMe){.broken_link}) ([Spec](http://www.w3.org/TR/css3-transitions/#animtype-color)) Example of animation corresponds to #1 in the pen, but I will rewrite the relevant code here.
```css
@keyframes color {
@@ -102,7 +102,7 @@ For animation, this corresponds to #3 in the pen I made at the top. I’ll r
### Conclusion
-Animations are quite enjoyable. The last box in my Codepen demo tries combining all three of those animations. (Super Wacky!) You don’t need to use keyframe animations to achieve this, you can also use the transition property. I used keyframes so you can better visualize what’s going on. There are plenty of other animatable properties to go through, so I’ll get started on those. In the meantime, if you want to look at some of the sites I used for research I’ll include the links below.
+Animations are quite enjoyable. The last box in my Codepen demo tries combining all three of those animations. (Super Wacky!) You don't need to use keyframe animations to achieve this, you can also use the transition property. I used keyframes so you can better visualize what's going on. There are plenty of other animatable properties to go through, so I'll get started on those. In the meantime, if you want to look at some of the sites I used for research I'll include the links below.
-
+```css
@keyframes margin {
-
-to { margin-right: 7rem; }
-
+ to { margin-right: 7rem; }
}
.margin {
-
-display: inline-block;
-
-height: 5rem;
-
-width: 5rem;
-
-background-color: lightblue;
-
-vertical-align: top;
-
+ display: inline-block;
+ height: 5rem;
+ width: 5rem;
+ background-color: lightblue;
+ vertical-align: top;
}
.margin:first-of-type {
-
-margin-right: 0;
-
-animation: margin 4s ease 0s infinite;
-
+ margin-right: 0;
+ animation: margin 4s ease 0s infinite;
}
-
+```css
@keyframes padding {
to { padding: 2rem; }
@@ -78,113 +67,90 @@ to { padding: 2rem; }
}
.padding {
-
-display: inline-block;
-
-padding: 0;
-
-background-color: lightgreen;
-
-animation: padding 2.5s ease 0s infinite;
-
+ display: inline-block;
+ padding: 0;
+ background-color: lightgreen;
+ animation: padding 2.5s ease 0s infinite;
}
-
+```css
@keyframes height {
-
-to { height: .01rem; }
-
+ to { height: .01rem; }
}
.height {
-
-display: inline-block;
-
-height: 4rem;
-
-width: 3rem;
-
-background-color: violet;
-
-animation: height 1.25s ease 0s infinite;
-
-vertical-align: top;
-
+ display: inline-block;
+ height: 4rem;
+ width: 3rem;
+ background-color: violet;
+ animation: height 1.25s ease 0s infinite;
+ vertical-align: top;
}
.height:nth-of-type(n) {
-
-animation: height 1.25s ease .2s infinite alternate;
-
+ animation: height 1.25s ease .2s infinite alternate;
}
.height:nth-of-type(2n) {
-
-animation: height 1.25s ease .4s infinite alternate;
-
+ animation: height 1.25s ease .4s infinite alternate;
}
.height:nth-of-type(3n) {
-
-animation: height 1.25s ease .6s infinite alternate;
-
+ animation: height 1.25s ease .6s infinite alternate;
}
-
+```css
@keyframes width {
-
-to { width: .01rem; }
-
+ to { width: .01rem; }
}
.width {
-
-margin-bottom: .2rem;
-
-height: 3rem;
-
-width: 6.5rem;
-
-background-color: bisque;
-
+ margin-bottom: .2rem;
+ height: 3rem;
+ width: 6.5rem;
+ background-color: bisque;
}
.width:nth-of-type(n) {
-
-animation: width 1.25s ease .2s infinite alternate;
-
+ animation: width 1.25s ease .2s infinite alternate;
}
.width:nth-of-type(2n) {
-
-animation: width 1.25s ease .4s infinite alternate;
-
+ animation: width 1.25s ease .4s infinite alternate;
}
.width:nth-of-type(3n) {
-
-animation: width 1.25s ease .6s infinite alternate;
-
+ animation: width 1.25s ease .6s infinite alternate;
}
-
-
+```css
@keyframes background-position {
-
to { background-position: 100% 0%; }
-
}
.background-position {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d3/Tajik_mountains_edit.jpg);
-
height: 6rem;
-
width: 8rem;
-
background-size: 200% 100%;
-
background-position: 0% 0%;
-
animation: background-position 5s linear .1s infinite alternate;
-
}
-
+```css
@keyframes position {
-
25% {
-
top: 0;
-
left: 3rem;
-
}
50% {
-
top: 3rem;
-
left: 3rem;
-
}
75% {
-
top: 3rem;
-
left: 0;
-
}
-
}
.position {
-
position: relative;
-
top: 0;
-
left: 0;
-
height: 3rem;
-
width: 3rem;
-
background-color: lightblue;
-
animation: position 1.5s ease .1s infinite;
-
}
-
+```css
@keyframes vertical-align {
-
to { vertical-align: 1rem; }
-
}
.vertical-align {
-
font-size: 1.5rem;
-
vertical-align: 0;
-
animation: vertical-align 1s ease-out .1s infinite alternate;
-
}
-
+```css
@keyframes z-index {
-
to { z-index: 0; }
-
}
.z-index {
-
position: absolute;
-
left: 1rem;
-
display: inline-block;
-
}
.z-index:nth-child(1) {
-
height: 1rem;
-
width: 1rem;
-
background-color: lightgreen;
-
z-index: 4;
-
}
.z-index:nth-child(2) {
-
height: 2rem;
-
width: 2rem;
-
background-color: #F4FFA4;
-
z-index: 3;
-
}
.z-index:nth-child(3) {
-
height: 3rem;
-
width: 3rem;
-
background-color: #DEB0ED;
-
z-index: 2;
-
}
.z-index:nth-child(4) {
-
height: 4rem;
-
width: 4rem;
-
background-color: #D8EADF;
-
z-index: 5;
-
animation: z-index 1s ease .1s infinite alternate;
-
}
-
- <link rel='stylesheet' href='style.css' />
-
- <script src='script.js'></script>
-tag a class of hello and id of world to use in CSS and Javascript +Give the `
` tag a class of hello and id of world to use in CSS and Javascript -
- <p class='hello' id='world'></p>
-
+```css
.hello { color: red; }
-
+```css
#world { font-size: 2rem; }
-
+You don't have to only use the class and id attributes in html, you can refer to any attribute. This code snippet grabs any canvas element with `data='sales'` and changes it's border to be 5px thick, dashed, and the color blue.
+
+```css
canvas[data=sales] { border: 5px dashed blue; }
-
+```js
document.getElementById();
document.getElementsByClassName(); //Returns an array of element(s)
document.querySelector(); //Returns the first matching selector
document.querySelectorAll(); //Returns an array of element(s)
-
+```js
element.className += “ random-class” //Note the space
-
+```js
window.matchMedia('aspect-ratio: 12/8'); //Returns true if the aspect ratio is 12/8
window.innerHeight; //Is the height of the window
window.innerWidth; //Is the width of the window
-