11 julio 2014

Una serie de TV muy buena: "Halt and Catch Fire"

Vuelvo de nuevo a estar activa, y en esta ocasión quiero hacerlo con una serie que he descubierto recientemente y que aunque al principio me suscitaba alguna duda, me ha terminando enganchando muchísimo. No sólo el argumento es muy interesante, si te gustan los ordenadores, es más que eso. La serie está ambientada en el Texas de los años 80 y plantea el auge de los ordenadores, la competeción que existe entre empresas informáticas contra IBM y cómo mejorar el Pc, y las relaciones personales y problemas de los protagonistas. (Bueno, no os cuento más: http://www.xataka.com/otros/halt-and-catch-fire-nada-tan-apasionante-como-la-historia-de-los-pioneros-de-la-informatica).
Estéticamente las imágenes están muy logradas e incluso la textura de la fotografía simula ese ambiente ochentero total .


Este es uno de los aparatitos que aparecen en la serie, genial, no?
Lo dicho, totalmente recomendable!!!.


19 mayo 2014

Crear un  efecto parallax usando solo CSS

Un blog muy interesante y totalmente recomendable para el diseño de páginas web es:
Es un blog muy práctico y con artículos muy interesantes, como el que os propongo en este post.

código:
<div class="image1">
    <h1>Titulo de la pagina</h1>
    <h2>Texto entre secciones</h2>
</div>
<section class="content">
    <p>Texto de la pagina. Parte 1</p>
</section>
<div class="image2">
    <h2>Texto entre secciones</h2>
</div>
<section class="content">
    <p>Texto de la pagina. Parte 2</p>
</section>
<div class="image3"
    <h2><a href="#">VOLVER ATRAS</a></div></h2>
</div>
El Css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
body {
    margin:0;
    padding:0;
    border:0;
}
.image1 {
    position:relative;
    backgroundurl('universo.jpg'no-repeat fixed;
    background-positioncenter center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height500px;
     
}
.image2 {
    position:relative;
    backgroundurl('universo2.jpg'no-repeat fixed;
    background-positioncenter center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height500px
}
.image3 {
    position:relative;
    backgroundurl('universo3.jpg'no-repeat fixed;
    background-positioncenter center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height500px
}
h1 {
    color#fff;
    font-size80px;
    text-align:center;
    font-weightbold;
    margin0 auto;
    width800px;
    positionfixed;
    top50%;
    left50%;
    margin-top-20%;
    margin-left-400px;
    opacity:0.8;
}
h2{
    color#fff;
    font-size55px;
    text-align:center;
    margin0 auto;
    width800px;
    positionabsolute;
    top50%;
    left50%;
    margin-left-400px;
    opacity:0.8;
}
.content {
    width100%;
    max-width960px;
    margin0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    positionrelative;
    background#FFF;
    z-index:2;
}
Agustín Baraza propone: 
situar las imágenes usando el valor cover de la propiedad background-size y darles unas medidas mínimas (min-height).