Блог по программированию

Задание по HTML к шестому уроку

Написано

admin

в

Задание сверстать старницу на подобие этой WebMaster или inext

Iwemaster

Inext

 

IWebMaster

Код HTML

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>6 урок</title>
  5. <link rel="stylesheet" href="style.css">
  6. </head>
  7. <body>
  8. <div id="header" class="fix">
  9. <div class="center">
  10. <div class="row">
  11. <div class="logo">
  12. <h3>
  13. <a href="index.html">IWebmaster.kz</a>
  14. </h3>
  15. </div>
  16. <div class="menu">
  17. <ul>
  18. <li><a href="index.html">Главная</a></li>
  19. <li><a href="">О нас</a></li>
  20. <li><a href="">Услуги</a></li>
  21. <li><a href="#">Контакты</a></li>
  22. </ul>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. <div id="content">
  28. <div class="block">
  29. <div class="center">
  30. <div class="row">
  31. </div>
  32. </div>
  33. </div>
  34. <div class="block2">
  35. <div class="center">
  36. <div class="row">content</div>
  37. </div>
  38. </div>
  39. <div class="center">
  40. <div class="row">
  41. <div class="col-2"><img src="images/2.jpg">
  42. </div>
  43. <div class="col-4 himg"><img src="images/5.jpeg"></div>
  44. <div class="col-4 himg"><img src="images/6.jpeg"></div>
  45. <div class="col-4 himg"><img src="images/7.jpeg"></div>
  46. <div class="col-4 himg"><img src="images/8.jpeg"></div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <div id="footer">
  52. <div class="center">
  53. <div class="row">footer</div>
  54. </div>
  55. </div>
  56. <div id="up">
  57. <a href="#"><img src="images/up.png"></a>
  58. </div>
  60. </body>
  61. </html>
<html>
  <head>
    <meta charset="utf-8">
    <title>6 урок</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="header" class="fix">
      <div class="center">
        <div class="row">
          <div class="logo">
            <h3>
            <a href="index.html">IWebmaster.kz</a>
            </h3>
          </div>
          <div class="menu">
            <ul>
              <li><a href="index.html">Главная</a></li>
              <li><a href="">О нас</a></li>
              <li><a href="">Услуги</a></li>
              <li><a href="#">Контакты</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="block">
        <div class="center">
          <div class="row">
          </div>
        </div>
      </div>
      <div class="block2">
        <div class="center">
          <div class="row">content</div>
        </div>
      </div>
      <div class="center">
        <div class="row">
        <div class="col-2"><img src="images/2.jpg">
        </div>
        <div class="col-4 himg"><img src="images/5.jpeg"></div>
        <div class="col-4 himg"><img src="images/6.jpeg"></div>
        <div class="col-4 himg"><img src="images/7.jpeg"></div>
        <div class="col-4 himg"><img src="images/8.jpeg"></div>
        </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="center">
        <div class="row">footer</div>
      </div>
    </div>
    <div id="up">
    <a href="#"><img src="images/up.png"></a>
    </div>
    
  </body>
</html>

CSS

  1. /* *-универсальный селектор - 0 баллов
  2. a,body,h1,p и т.д. - селекторы тегов(элементов) - 2 балла
  3. .content,.row и т.д. - селекторы классов - 10 баллов
  4. #header,#content,#footer - селекторы идентификаторов - 100 баллов
  5. */
  6. *{
  7. margin:0;
  8. padding:0;
  9. box-sizing:border-box;
  11. }
  12. a{
  13. text-decoration:none;
  15. }
  16. body{
  17. background:#ff0 url(images/pattern3.jpg) repeat;
  18. }
  19. img{
  20. max-width:100%;
  21. width:auto;
  22. }
  23. /*задаем блокам резиновые свойства*/
  24. #header,#content,#footer{
  25. width:100%;
  26. float:left;
  27. border:1px solid #FFF;
  28. }
  29. .fix{
  30. position:fixed;
  31. }
  32. #header,#footer{
  33. background:rgba(0,0,0,0.7);
  34. }
  35. #content{
  36. margin-top:64px;
  37. }
  38. /*
  39. position:fixed;
  40. position:relative;
  41. position:absolute;
  42. */
  43. /*задаем ширину рабочей области и оцентровываем ее*/
  44. .center{
  45. max-width:1124px;/**/
  46. margin:0 auto;
  47. }
  49. .row{
  50. float:left;
  51. width:100%;
  52. padding:20px;
  53. }
  54. .logo{
  55. float:left;
  56. }
  57. .menu{
  58. float:right;
  59. }
  60. .menu a,.logo a{
  61. color:#fff;
  62. }
  63. .menu li{
  64. float:left;
  65. }
  66. .menu a{
  67. padding:25px 20px;
  69. }
  70. /* :hover - псевдоселектор, изменяет отображение блока при наведении*/
  71. .menu a:hover{
  72. background:#fff;
  73. color:#000;
  74. border-bottom:5px solid red;
  75. }
  76. .block{
  77. float:left;
  78. width:100%;
  79. background:url(images/fon1.png) no-repeat;
  80. background-size:cover; /*размер фоновой картинки: ширина 100% и высота 100% блока*/
  81. background-position:50% 50%;/*оцентровываем картинку*/
  82. background-attachment:fixed; /*создаем параллакс эффект - фиксируем картинку*/
  83. height:100vh; /*100% высота окна*/
  85. }
  86. .block2{
  87. float:left;
  88. width:100%;
  89. background:url(images/pattern.jpg) no-repeat;
  90. background-size:cover;
  91. background-position:50% 50%;
  92. background-attachment:fixed;
  93. height:100vh;
  95. }
  96. .col-2{
  97. width:50%;
  98. padding:20px;
  99. float:left;
  100. }
  101. .col-4{
  102. width:25%;
  103. padding:20px;
  104. float:left;
  105. }
  107. .himg{
  108. height:150px;
  109. }
  110. #up{
  111. position:fixed;
  112. width:50px;
  113. bottom:10%;
  114. right:5%;
  115. }
  116. .str1{
  118. }
  119. .str1::after{
  120. content: " ";
  121. height: 200px;
  122. background: #000;
  123. width: 1px;
  124. position: absolute;
  125. transform: rotate(-45deg);
  126. left: 100%;
  127. top: 20px;
  128. }
/* *-универсальный селектор - 0 баллов
  a,body,h1,p и т.д. - селекторы тегов(элементов) - 2 балла
  .content,.row и т.д. - селекторы классов - 10 баллов
  #header,#content,#footer - селекторы идентификаторов - 100 баллов
 */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  
}
a{
  text-decoration:none;
  
}
body{
  background:#ff0 url(images/pattern3.jpg) repeat;
}
img{
  max-width:100%;
  width:auto;
}
/*задаем блокам резиновые свойства*/
#header,#content,#footer{
  width:100%;
  float:left;
  border:1px solid #FFF;
}
.fix{
  position:fixed;
}
#header,#footer{
  background:rgba(0,0,0,0.7);
}
#content{
  margin-top:64px;
}
/*
position:fixed;
position:relative;
position:absolute;
*/
/*задаем ширину рабочей области и оцентровываем ее*/
.center{
  max-width:1124px;/**/
  margin:0 auto;
}

.row{
  float:left;
  width:100%;
  padding:20px;
}
.logo{
  float:left;
}
.menu{
  float:right;
}
.menu a,.logo a{
  color:#fff;
}
.menu li{
  float:left;
}
.menu a{
  padding:25px 20px;
  
}
/* :hover - псевдоселектор, изменяет отображение блока при наведении*/
.menu a:hover{
  background:#fff;
  color:#000;
  border-bottom:5px solid red;
}
.block{
  float:left;
  width:100%;
  background:url(images/fon1.png) no-repeat;
  background-size:cover; /*размер фоновой картинки: ширина 100% и высота 100% блока*/
  background-position:50% 50%;/*оцентровываем картинку*/
  background-attachment:fixed; /*создаем параллакс эффект - фиксируем картинку*/
  height:100vh; /*100% высота окна*/
  
}
.block2{
  float:left;
  width:100%;
  background:url(images/pattern.jpg) no-repeat;
  background-size:cover;
  background-position:50% 50%;
  background-attachment:fixed;
  height:100vh;
  
}
.col-2{
  width:50%;
  padding:20px;
  float:left;
}
.col-4{
  width:25%;
  padding:20px;
  float:left;
}

.himg{
  height:150px;
}
#up{
  position:fixed;
  width:50px;
  bottom:10%;
  right:5%;
}
.str1{
  
}
.str1::after{
   content: " ";
    height: 200px;
    background: #000;
    width: 1px;
    position: absolute;
    transform: rotate(-45deg);
    left: 100%;
    top: 20px;
}

 

 

 

INEXT

Код HTML

  1. <html>
  2. <head>
  3. <title> Блочная верстка </title>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="style.css">
  7. </head>
  9. <body>
  10. <div id="wrapper">
  11. <!--шапка сайта-->
  12. <div class="header">
  13. <div class="top">
  14. <div class="zapis"><a href="contact.html">Записaться</a></div>
  15. <div class="phone"><address>г.Караганда, ул.Бульвар мира 37, офис 412 | тел: +7 7212 421218, + 7 777 226 27 88</address></div>
  16. </div>
  17. <div class="main">
  18. <div class="logo"><a href="index.html"><img src="images/logo.png"></a></div>
  19. <div class="menu">
  20. <ul>
  21. <li><a href="">Главная </a> </li>
  22. <li><a href="">Портфолио</a></li>
  23. <li><a href="">Отзывы</a></li>
  24. <li><a href="">Контакты</a></li>
  25. </ul>
  26. </div>
  27. </div>
  28. </div>
  29. <!--Конец шапки сайта-->
  30. <!--1 блок-->
  31. <div id="content">
  32. <div class="backcontent">
  33. </div>
  34. <div class="center"><h1>Школа программирования NEXT в Караганде</h1></div>
  35. <div class="left">
  36. <p>Ты школьник или студент? Хочешь изучать современные языки программирования?
  37. Создавать сайты, мобильные приложения, игры.
  38. Тебя ждёт школа программирования «Next».<br>
  39. Запишись скорее, количество мест ограничено.
  40. Школа «Next» - программировать с нами – это увлекательно.</p>
  41. </div>
  42. <div class="right"></div>
  43. </div>
  44. <!--Конец второго блока-->
  45. <!--2 блок-->
  46. <div id="content2">
  47. <h2>Расписание школы программирования Next</h2>
  48. <div class="left2">
  49. <p>Время занятий:<br>
  50. 10:00 - 12:00, 12:00 - 14:00<br>
  51. 14:00 - 16:00, 16:00 - 18:00<br>
  52. Два занятия в неделю<br>
  53. Группы: Пн-Пт, Вт-Чт, Ср-Сб<br></p>
  54. </div>
  55. <div class="center2">
  56. <p>
  57. Предлагаемые курсы:<br>
  58. - Общий курс программирования<br>
  59. (3 - 11 классы)<br>
  60. - Алгоритмы и олимпиады<br>
  61. (6 - 11 классы, студенты)<br>
  62. - Веб: дизайн и программирование<br>
  63. (6 - 11 классы, студенты)<br>
  64. </p>
  65. </div>
  66. <div class="right2"><p>
  67. 11000 тг. в месяц
  68. Скидка 30%.<br>
  69. </p><p>
  70. Адрес:<br>
  71. Г. Караганда.<br>
  72. Бульвар Мира 37 <br>
  73. Офис 412 . 4 этаж.</p>
  74. </div>
  75. </div>
  76. <!--конец второго блока-->
  77. <div class="footer">Футер</div>
  79. </div>
  80. </body>
  81. </html>
<html>
    <head> 
       <title> Блочная верстка </title>
     <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    
  </head>
    
  <body> 
    <div id="wrapper">
    <!--шапка сайта-->
      <div class="header">
      <div class="top">
        <div class="zapis"><a href="contact.html">Записaться</a></div>
        <div class="phone"><address>г.Караганда, ул.Бульвар мира 37, офис 412 | тел: +7 7212 421218, + 7 777 226 27 88</address></div>
      </div>
      <div class="main">
        <div class="logo"><a href="index.html"><img src="images/logo.png"></a></div>
        <div class="menu">
            <ul>
              <li><a href="">Главная </a>	</li>
              <li><a href="">Портфолио</a></li>
              <li><a href="">Отзывы</a></li>
              <li><a href="">Контакты</a></li>
            </ul>
        </div>
      </div>
      </div>
      <!--Конец шапки сайта-->
      <!--1 блок-->
      <div id="content">
        <div class="backcontent">
        </div>
        <div class="center"><h1>Школа программирования NEXT в Караганде</h1></div>
        <div class="left">
        <p>Ты школьник или студент? Хочешь изучать современные языки программирования?
        Создавать сайты, мобильные приложения, игры.
        Тебя ждёт школа программирования «Next».<br>
        Запишись скорее, количество мест ограничено.
        Школа «Next» - программировать с нами – это увлекательно.</p>
        </div>
        <div class="right"></div>
      </div>
      <!--Конец второго блока-->
      <!--2 блок-->
      <div id="content2">
        <h2>Расписание школы программирования Next</h2>
        <div class="left2">
        <p>Время занятий:<br>
        10:00 - 12:00, 12:00 - 14:00<br>
        14:00 - 16:00, 16:00 - 18:00<br>
        Два занятия в неделю<br>
        Группы: Пн-Пт, Вт-Чт, Ср-Сб<br></p>
        </div>
        <div class="center2">
        <p>
        Предлагаемые курсы:<br>
        - Общий курс программирования<br>
        (3 - 11 классы)<br>
        - Алгоритмы и олимпиады<br>
        (6 - 11 классы, студенты)<br>
        - Веб: дизайн и программирование<br>
        (6 - 11 классы, студенты)<br>
        </p>
        </div>
        <div class="right2"><p>
          11000 тг. в месяц
          Скидка 30%.<br>
          </p><p>
          Адрес:<br>
          Г. Караганда.<br>
          Бульвар Мира 37 <br>
          Офис 412	. 4 этаж.</p>
        </div>
      </div>
      <!--конец второго блока-->
      <div class="footer">Футер</div>
      
    </div>
  </body>
</html>

Код СSS

  1. @import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,cyrillic);
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. body{
  7. font-family: 'Ubuntu Condensed', sans-serif;
  8. background:url(images/pattern.png);
  9. background-attachment:fixed;
  11. }
  12. img{
  13. max-width:100%;
  14. width:auto;
  15. }
  16. /*Внешняя оболочка сайта*/
  17. #wrapper{
  18. max-width:1200px;
  19. min-width:300px;
  20. margin:0 auto;
  21. position:relative;
  22. }
  23. /*шапка сайта*/
  24. .header{
  25. width:100%;
  26. float:left;
  27. border-bottom: 2px #fff solid;
  28. }
  29. /*верхняя часть шапки где указывается координаты*/
  30. .top{
  31. max-width:1200px;
  32. width:100%;
  33. min-width:300px;
  34. background: rgba(0, 0, 0, 0.8);
  35. color: #F5F5F5;
  36. border-bottom: 1px #fff solid;
  37. font-size: 12px;
  38. position:fixed;
  39. top:0;
  40. z-index:5;
  42. }
  43. /*ссылка записаться на курсы */
  44. .zapis{
  45. float:left;
  46. margin:10px 20px;
  47. }
  48. .zapis a{
  49. color:#fff;
  50. }
  51. /*контактные данные*/
  52. .phone{
  53. float:right;
  54. margin:10px 20px;
  55. max-width:375px;
  56. width:100%;
  57. min-width:300px;
  58. }
  59. /*конец верхней части top*/
  61. /*логотип*/
  62. .main{
  63. background:rgba(222, 33, 75, 0.82);
  64. float:left;
  65. width:100%;
  66. margin-top: 34px;
  67. }
  68. .logo{
  69. max-width:300px;/*максимальная ширина блока с логотипом*/
  70. float:left;
  71. margin:10px 20px;
  72. }
  73. .logo img{
  74. width:100px;/*ширина картинки*/
  75. }
  76. /*меню*/
  77. .menu{
  78. max-width:820px;/*максимальная ширина блока*/
  79. margin:10px 0px;/*внешний отступ сверху и снизу 10px*/
  80. float:right;/*расположение справа*/
  81. font-size: 20px;/*размер шрифта*/
  82. }
  84. .menu li{
  85. float:left;
  86. margin:5px 0px;
  87. }
  88. .menu a{
  89. padding:10px 20px;
  90. text-decoration:none;
  91. color:#fff;
  92. border-left:1px transparent solid;/*рамка слева с прозрачным цветом*/
  93. border-right:1px transparent solid;/*рамка справа с прозрачным цветом*/
  94. }
  95. /*правило для меню при наведении*/
  96. .menu a:hover{
  97. padding:15px 20px;
  98. background:#a73c53;
  99. border-left:1px #fff solid;
  100. border-right:1px #fff solid;
  101. }
  102. .sidebar{
  103. width:300px;
  104. background:#666;
  105. float:left;
  106. padding:15px;
  107. box-sizing:border-box;
  108. }
  109. .content{
  110. width:calc(100% - 300px);
  111. min-width:300px;
  112. background:#777;
  113. float:left;
  114. padding:15px;
  115. box-sizing:border-box;
  116. }
  117. #content{
  118. float:left;
  119. width:100%;
  120. position:relative;
  121. border-bottom: 2px #fff solid;
  122. }
  123. #content2{
  124. z-index:3;
  125. background:#fff;
  126. float:left;
  127. width:100%;
  128. }
  129. /*фон картинка*/
  130. .backcontent{
  131. width:100%;
  132. height:400px;
  133. background:url(images/Zanyatiya.jpg);
  134. background-size:cover;/*Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.*/
  135. background-attachment:fixed;/*Делает фоновое изображение элемента неподвижным.*/
  136. -webkit-filter: blur(0px) brightness(0.3);/*размытие 0, яркость 0.3*/
  137. -moz-filter: blur(0px) brightness(0.3);
  138. -o-filter: blur(0px) brightness(0.3);
  139. -ms-filter: blur(0px) brightness(0.3);
  140. filter: blur(1px) brightness(0.3);
  141. }
  142. .center{
  143. width:100%;
  144. text-align:center;
  145. color:#fff;
  146. position:absolute;
  147. top:40px;
  148. z-index:2;
  149. }
  150. .left{
  151. width:40%;
  152. color:#fff;
  153. position:absolute;
  154. left:10%;
  155. top:100px;
  156. font-size:18px;
  157. text-align:center;
  158. }
  160. .right{
  161. width:40%;
  162. color:#fff;
  163. position:absolute;
  164. right:10%;
  165. top:80px;
  166. font-size:18px;
  167. text-align:center;
  168. }
  169. .left2,.center2,.right2{
  170. width:30%;
  171. float:left;
  172. margin:20px;
  173. text-align:center;
  174. font-weight:bold;
  175. }
  176. #content2 h2{
  177. text-align:center;
  178. margin:20px 0;
  180. }
  183. .footer{
  184. width:100%;
  185. background:#000;
  186. float:left;
  187. padding:15px;
  188. box-sizing:border-box;
  189. color:#fff;
  190. }
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,cyrillic);
*{
  margin:0;
  padding:0;	
}
body{
  font-family: 'Ubuntu Condensed', sans-serif;
  background:url(images/pattern.png);
  background-attachment:fixed;
  
}
img{
  max-width:100%;
  width:auto;
}
/*Внешняя оболочка сайта*/
#wrapper{
  max-width:1200px;
  min-width:300px;
  margin:0 auto;
  position:relative;
}
/*шапка сайта*/
.header{
  width:100%;
  float:left;
  border-bottom: 2px #fff solid;
}
/*верхняя часть шапки где указывается координаты*/
.top{
  max-width:1200px;
  width:100%;
  min-width:300px;
  background: rgba(0, 0, 0, 0.8);
    color: #F5F5F5;
    border-bottom: 1px #fff solid;
    font-size: 12px;
  position:fixed;
  top:0;
  z-index:5;
  
}
/*ссылка записаться на курсы */
.zapis{
  float:left;
  margin:10px 20px;
}
.zapis a{
  color:#fff;
}
/*контактные данные*/
.phone{
  float:right;
  margin:10px 20px;
  max-width:375px;
  width:100%;
  min-width:300px;
}
/*конец верхней части top*/

/*логотип*/
.main{
  background:rgba(222, 33, 75, 0.82);
  float:left;
  width:100%;
  margin-top: 34px;
}
.logo{
  max-width:300px;/*максимальная ширина блока с логотипом*/
  float:left;
  margin:10px 20px;
}
  .logo img{
  width:100px;/*ширина картинки*/
}
/*меню*/
.menu{
  max-width:820px;/*максимальная ширина блока*/
  margin:10px 0px;/*внешний отступ сверху и снизу 10px*/
  float:right;/*расположение справа*/
  font-size: 20px;/*размер шрифта*/
}

.menu li{
  float:left;
  margin:5px 0px;
}
.menu a{
  padding:10px 20px;
  text-decoration:none;
  color:#fff;
  border-left:1px transparent solid;/*рамка слева с прозрачным цветом*/
  border-right:1px transparent solid;/*рамка справа с прозрачным цветом*/
}
/*правило для меню при наведении*/
.menu a:hover{
  padding:15px 20px; 
  background:#a73c53;
  border-left:1px #fff solid;
  border-right:1px #fff solid;
}
.sidebar{
  width:300px;
  background:#666;
  float:left;
  padding:15px;
  box-sizing:border-box;
}
.content{
  width:calc(100% - 300px);
  min-width:300px;
  background:#777;
  float:left;
  padding:15px;
  box-sizing:border-box;
}
#content{
  float:left;
  width:100%;
  position:relative;
  border-bottom: 2px #fff solid;
}
#content2{
  z-index:3;
  background:#fff;
  float:left;
  width:100%;
}
/*фон картинка*/
.backcontent{
  width:100%;
  height:400px;
  background:url(images/Zanyatiya.jpg);
  background-size:cover;/*Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.*/
  background-attachment:fixed;/*Делает фоновое изображение элемента неподвижным.*/
  -webkit-filter: blur(0px) brightness(0.3);/*размытие 0, яркость 0.3*/
  -moz-filter:  blur(0px) brightness(0.3);
  -o-filter:  blur(0px) brightness(0.3);
  -ms-filter:  blur(0px) brightness(0.3);
  filter: blur(1px) brightness(0.3);
}
.center{
  width:100%;
  text-align:center;
  color:#fff;
  position:absolute;
  top:40px;
  z-index:2;
}
.left{
  width:40%;
  color:#fff;
  position:absolute;
  left:10%;
  top:100px;
  font-size:18px;
  text-align:center;
}

.right{
  width:40%;
  color:#fff;
  position:absolute;
  right:10%;
  top:80px;
  font-size:18px;
  text-align:center;
}
.left2,.center2,.right2{
  width:30%;
  float:left;
  margin:20px;
  text-align:center;
  font-weight:bold;
  }
#content2 h2{
  text-align:center;
  margin:20px 0;
  
}
  

.footer{
  width:100%;
  background:#000;
  float:left;
  padding:15px;
  box-sizing:border-box;
  color:#fff;
}

Дополнительно

Работа с фоном

  1. Сделать фон, который при прокрутке сайта в низ становился темнее.
  2. Создать галерию для сайта с эфффектами для фото.
  1. Создать страницу galereya.html и задать стиль для фона:
  1. <html>
  3. <head>
  5. <title>Город мой</title>
  6. <meta name="keywords" content="Ключевые слова, HTML и его элементы" >
  7. <meta charset="utf-8">
  8. <meta name="description" content="Основы HTML от GoldStudio" >
  9. <meta name="author" content="Джон Дое" >
  10. <meta name="robots" content="index,follow">
  11. <style type="text/css">
  13. html,body {
  14. height:auto !important;
  15. height:3000px;
  16. background: #f0f9ff;
  17. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(3000px,#6996d3));
  18. background: -webkit-linear-gradient(top, #f0f9ff 0%,#6996d3 3000px);
  19. background: -moz-linear-gradient(top, #f0f9ff 0%, #6996d3 3000px);
  20. background: -ms-linear-gradient(top, #f0f9ff 0%,#6996d3 3000px);
  21. background: -o-linear-gradient(top, #f0f9ff 0%,#6996d3 3000px);
  22. background: linear-gradient(to bottom, #f0f9ff 0%,#6996d3 3000px);
  23. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#6996d3',GradientType=0 );
  24. }
  25. </style>
  27. </head>
  28. <body>
  29. …
  30. </body>
  32. </html>
<html>

    <head>

        <title>Город мой</title>
        <meta name="keywords" content="Ключевые слова, HTML и его элементы" >
        <meta charset="utf-8">
        <meta name="description" content="Основы HTML от GoldStudio" >
        <meta name="author" content="Джон Дое" >
        <meta name="robots" content="index,follow">
        <style type="text/css">

            html,body {
                 height:auto !important;
                 height:3000px;
                 background: #f0f9ff;
                 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(3000px,#6996d3));
                 background: -webkit-linear-gradient(top,  #f0f9ff 0%,#6996d3 3000px);
                 background: -moz-linear-gradient(top,  #f0f9ff 0%, #6996d3 3000px);
                 background: -ms-linear-gradient(top,  #f0f9ff 0%,#6996d3 3000px);
                 background: -o-linear-gradient(top,  #f0f9ff 0%,#6996d3 3000px);
                 background: linear-gradient(to bottom,  #f0f9ff 0%,#6996d3 3000px);
                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#6996d3',GradientType=0 );
                 }
         </style>

    </head>
    <body>
…
    </body>

</html>

Тот же стиль можно добавить и на остальные страницы убрав или закоментировав имеющийся, тогда при увеличении длины страницы и прокрутки ее в низ до размеров в 3000px фон будет становится темнее. Длину можно сделать больше или меньше. Плюс поменять цвета для остальных стилей например так:

Untitled-32

2.Перед тем как приступить работать с изображениями в стилях зададим базовые правила для них. Код:

  1. * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. -ms-box-sizing: border-box;
  5. box-sizing: border-box;
  6. }
  8. body {
  9. background: #333;
  10. }
  12. .pic {
  13. border: 10px solid #fff;
  14. float: left;
  15. height: 300px;
  16. width: 300px;
  17. margin: 20px;
  18. overflow: hidden;
  20. -webkit-box-shadow: 5px 5px 5px #111;
  21. box-shadow: 5px 5px 5px #111;
  22. }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #333;
}

.pic {
border: 10px solid #fff; 
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;

-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111; 
}

border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden

3.Рассмотрим применение фильтров изображений.  Чтобы обеспечить максимальную совместимость браузера, в фильтрах использовать будем префикс-WebKit (для браузеров Chrome и Safari), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.
Эффект размытия:

  1. <div class="blur pic">
  2. <img src="gorod7.jpg" alt="plane">
  3. </div>
<div class="blur pic">
<img src="gorod7.jpg" alt="plane">
</div>

Стиль:

  1. /*BLUR*/
  2. .blur img {
  3. -webkit-transition: all 1s ease;
  4. -moz-transition: all 1s ease;
  5. -o-transition: all 1s ease;
  6. -ms-transition: all 1s ease;
  7. transition: all 1s ease;
  8. }
  10. .blur img:hover {
  11. -webkit-filter: blur(5px);
  12. }
/*BLUR*/
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.blur img:hover {
-webkit-filter: blur(5px);
}

Untitled-40

4. С помощью этого фильтра, добьемся эффекта черно-белого изображения.

  1. <div class="bw pic">
  2. <img src="gorod8.jpg" alt="sea">
  3. </div>
<div class="bw pic">
<img src="gorod8.jpg" alt="sea">
</div>

Стиль:

  1. /*B&W*/
  2. .bw {
  3. -webkit-transition: all 1s ease;
  4. -moz-transition: all 1s ease;
  5. -o-transition: all 1s ease;
  6. -ms-transition: all 1s ease;
  7. transition: all 1s ease;
  8. }
  10. .bw:hover {
  11. -webkit-filter: grayscale(100%);
  12. }
/*B&W*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.bw:hover {
-webkit-filter: grayscale(100%);
}

Untitled-41

5. Еще один эффект перевод цветного изображения в тональность сепия.
Значения фильтров сепия и оттенки серого указаны в процентах, где 100% является максимальным. Если не указывать число то 100% будут применены по умолчанию. То же относится и к предыдущему стилю.

  1. <div class="sepia pic"style="clear: both">
  2. <img src="gorod9.jpg" alt="sea">
  3. </div>
<div class="sepia pic"style="clear: both">
<img src="gorod9.jpg" alt="sea">
</div>

И

  1. /*SEPIA*/
  2. .sepia img {
  3. -webkit-transition: all 1s ease;
  4. -moz-transition: all 1s ease;
  5. -o-transition: all 1s ease;
  6. -ms-transition: all 1s ease;
  7. transition: all 1s ease;
  8. }
  10. .sepia img:hover {
  11. -webkit-filter: sepia(100%);
  12. }
/*SEPIA*/
.sepia img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.sepia img:hover {
-webkit-filter: sepia(100%);
}

Untitled-42

6. Теперь контрастность. Существует небольшая разница в использовании этого фильтра. Обычным значение контрастности является 100%. Больше 100% цвета насыщенней, меньше цвета тускнеют.

  1. /*CONTRAST*/
  2. .contrast img {
  3. -webkit-transition: all 1s ease;
  4. -moz-transition: all 1s ease;
  5. -o-transition: all 1s ease;
  6. -ms-transition: all 1s ease;
  7. transition: all 1s ease;
  8. }
  10. .contrast img:hover {
  11. -webkit-filter: contrast(185%);
  12. }
/*CONTRAST*/
.contrast img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.contrast img:hover {
-webkit-filter: contrast(185%); 
}

И

  1. <div class="contrast pic">
  2. <img src="gorod10.jpg" alt="sea">
  3. </div>
<div class="contrast pic">
<img src="gorod10.jpg" alt="sea">
</div>

Результат:

Untitled-43

7. Данный фильтр изменяет цвета картинки в зависимости от заданного угла. Так что здесь можно поэксперементировать, но я предлагаю такой вариант:

  1. /*HUE_ROTATE*/
  2. .hue-rotate img {
  3. -webkit-transition: all 1s ease;
  4. -moz-transition: all 1s ease;
  5. -o-transition: all 1s ease;
  6. -ms-transition: all 1s ease;
  7. transition: all 1s ease;
  8. }
  10. .hue-rotate img:hover {
  11. -webkit-filter: hue-rotate(130deg);
  12. }
/*HUE_ROTATE*/
.hue-rotate img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.hue-rotate img:hover {
-webkit-filter: hue-rotate(130deg); 
}

И

  1. <div class="hue-rotate pic">
  2. <img src="gorod11.jpg" alt="sea">
  3. </div>
<div class="hue-rotate pic">
<img src="gorod11.jpg" alt="sea">
</div>

Untitled-44

8. Еще один Webkit фильтр изображений — это инверсия. Данный фильтр инвертирует цвета. Значение задается в % от 0-100.

  1. /*INVERT*/
  2. .invert img {
  3. -webkit-transition: all 1s ease;
  4. -moz-transition: all 1s ease;
  5. -o-transition: all 1s ease;
  6. -ms-transition: all 1s ease;
  7. transition: all 1s ease;
  8. }
  10. .invert img:hover {
  11. -webkit-filter: invert(100%);
  12. }
/*INVERT*/
.invert img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.invert img:hover {
-webkit-filter: invert(100%); 
}

И

  1. <div class="invert pic">
  2. <img src="gorod12.jpg" alt="sea">
  3. </div>
<div class="invert pic">
<img src="gorod12.jpg" alt="sea">
</div>

Untitled-45

9. Наверное самый распространенный способ манипуляции с цветами изображения, так это добавление прозрачности. Теперь и с помощью CSS3. Вынес его в отдельный раздел в связи с одной особенностью, о ней ниже. Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.

  1. /*OPACITY*/
  2. .opacity img {
  3. -webkit-transition: all 1s ease;
  4. -moz-transition: all 1s ease;
  5. -o-transition: all 1s ease;
  6. -ms-transition: all 1s ease;
  7. transition: all 1s ease;
  8. }
  10. .opacity img:hover {
  11. -webkit-filter: opacity(25%);
  12. }
/*OPACITY*/
.opacity img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.opacity img:hover {
-webkit-filter: opacity(25%); 
}

И

  1. <div class="opacity pic">
  2. <img src="gorod13.jpg" alt="sea">
  3. </div>
<div class="opacity pic">
<img src="gorod13.jpg" alt="sea">
</div>

Untitled-46

10. Ну и в заключении объединим фильтры в одном правиле, это возможно и дает боле комплексный эффект например такой:

  1. /*obe*/
  2. .obe img {
  3. -webkit-transition: all 1s ease;
  4. -moz-transition: all 1s ease;
  5. -o-transition: all 1s ease;
  6. -ms-transition: all 1s ease;
  7. transition: all 1s ease;
  8. }
  10. .obe img:hover {
  11. -webkit-filter: sepia(100%) contrast(150%) opacity(40%);
  12. }
/*obe*/
.obe img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.obe img:hover {
-webkit-filter: sepia(100%) contrast(150%) opacity(40%);
}

И

  1. <div class="obe pic">
  2. <img src="gorod9.jpg" alt="sea">
  3. </div>
<div class="obe pic">
<img src="gorod9.jpg" alt="sea">
</div>

Untitled-47

 

  1. Сделаем блок с фотографиями под заголовком, используя position:absolute

1. Под заголовок вставляем блок с содержимым:

 

  1. <div>
  3. <img class="pic a" src="gorod.jpg" alt="караганда">
  4. <img class="pic b" src="gorod1.jpg" alt="караганда">
  5. <img class="pic c" src="gorod2.jpg" alt="караганда">
  6. <img class="pic d" src="gorod3.jpg" alt="караганда">
  7. <img class="pic e" src="gorod4.jpg" alt="караганда">
  9. </div>
<div>

         <img class="pic  a" src="gorod.jpg" alt="караганда">
         <img class="pic  b" src="gorod1.jpg" alt="караганда">
         <img class="pic  c" src="gorod2.jpg" alt="караганда">
         <img class="pic  d" src="gorod3.jpg" alt="караганда">
         <img class="pic  e" src="gorod4.jpg" alt="караганда">

</div>

Обратите внимание на использование двух классов для одного изображения class=»pic  a»

  1. Укажем общий класс для всей изображений pic:
  1. .pic {
  3. border: 10px solid #fff;
  4. float: left;
  5. height: 200px;
  6. width: 200px;
  7. margin: 20px;
  8. overflow: hidden;
  9. -webkit-box-shadow: 5px 5px 5px #111;
  10. box-shadow: 5px 5px 5px #111;
  12. }
.pic {

                border: 10px solid #fff; 
                float: left;
                height: 200px;
                width: 200px;
                margin: 20px;
                overflow: hidden;
                -webkit-box-shadow: 5px 5px 5px #111;
                box-shadow: 5px 5px 5px #111; 

      }
  1. Укажем класс для каждого отдельного изображения:

 

  1. .a {
  3. position: absolute;
  4. left: 10px;
  5. top: 30px;
  6. z-index: 1;
  8. }
  9. .b {
  11. position: absolute;
  12. left: 115px;
  13. top: 115px;
  14. z-index: 2;
  16. }
  17. .c {
  19. position: absolute;
  20. left: 10px;
  21. top: 300px;
  22. z-index: 3;
  24. }
  25. .d {
  27. position: absolute;
  28. left: 115px;
  29. top: 400px;
  30. z-index: 4;
  32. }
  33. .e {
  35. position: absolute;
  36. left: 10px;
  37. top: 570px;
  38. z-index: 5;
  40. }
 .a {

                position: absolute;
                left: 10px;
                top: 30px;
                z-index: 1;

            }
  .b {

                position: absolute;
                left: 115px;
                top: 115px;
                z-index: 2;

            }
  .c {

                position: absolute;
                left: 10px;
                top: 300px;
                z-index: 3;

            }
  .d {

                position: absolute;
                left: 115px;
                top: 400px;
                z-index: 4;

            }
  .e {

                position: absolute;
                left: 10px;
                top: 570px;
                z-index: 5;

            }

Смотрим результат:

Untitled-59

 

Больше записей