Skip to content

Instantly share code, notes, and snippets.

View mikelemus27's full-sized avatar

Miguel Angel Gallardo Lemus mikelemus27

14 followers · 20 following
View GitHub Profile
@mikelemus27
mikelemus27 / jsbin.sijeyafu.css
Created June 20, 2014 23:44
.recuadro1{
width:0px;
border-top:50px solid violet;
border-right:50px solid pink;
border-bottom:50px solid yellow;
border-left:50px solid limegreen;
}
@mikelemus27
mikelemus27 / jsbin.lodab.css
Created June 20, 2014 23:54
.recuadro1{
width:100px;
height:100px ;
border-top:50px solid violet;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid transparent;
}
@mikelemus27
mikelemus27 / jsbin.sijeyafu.css
Created August 8, 2014 22:15
.recuadro1{
width:0px;
border-top:50px solid violet;
border-right:50px solid pink;
border-bottom:50px solid yellow;
border-left:50px solid limegreen;
}
@mikelemus27
mikelemus27 / jsbin.kejuj.html
Created August 8, 2014 22:23
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://knockoutjs.com/examples/resources/knockout.simpleGrid.3.0.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
@mikelemus27
mikelemus27 / jsbin.hidura.css
Created August 8, 2014 22:23
/*http://www.barelyfitz.com/screencast/html-training/css/positioning/*/
#div-before{
background-color: red;
}
#div-1 {
position:static;
top:20px;
left:-40px;
background-color: purple;
@mikelemus27
mikelemus27 / jsbin.hidura.css
Created August 8, 2014 22:34
/*http://www.barelyfitz.com/screencast/html-training/css/positioning/*/
#div-before{
background-color: red;
}
#div-1 {
position:relative;
top:20px;/*mueve l objeto desde el borde superior hacia abajo, separandolo de su contenedor*/
left:40px;/*mueve l objeto desde el borde izquierdo hacia la derecha, separandolo de su contenedor*/
background-color: purple;
}
@mikelemus27
mikelemus27 / jsbin.hidura.css
Created August 8, 2014 22:37
/*http://www.barelyfitz.com/screencast/html-training/css/positioning/*/
#div-before{
background-color: red;
}
#div-1 {
/*top y left no funcionan si position no esta o es estatic*/
position:static;
top:20px;/*mueve l objeto desde el borde superior hacia abajo, separandolo de su contenedor*/
left:40px;/*mueve el objeto desde el borde izquierdo hacia la derecha, separandolo de su contenedor*/
background-color: purple;
@mikelemus27
mikelemus27 / jsbin.hidura.css
Created August 8, 2014 22:41
/*http://www.barelyfitz.com/screencast/html-training/css/positioning/*/
/**********************
4. position:relative + position:absolute
If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:
*****************************/
#div-before{
background-color: red;
}
@mikelemus27
mikelemus27 / jsbin.hidura.css
Created August 8, 2014 22:44
/*http://www.barelyfitz.com/screencast/html-training/css/positioning/*/
/**********************
5. two column absolute
Now we can make a two-column layout using relative and absolute positioning!
*****************************/
#div-before{
background-color: red;
}
@mikelemus27
mikelemus27 / jsbin.hidura.css
Created August 8, 2014 22:47
/*http://www.barelyfitz.com/screencast/html-training/css/positioning/*/
/**********************
7. float
For variable height columns, absolute positioning does not work, so let's come up with another solution.
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it's the only tool we have).
*****************************/
#div-before{