Последние учебники веб-разработки
 

W3.CSS Изображений


Просмотр изображений

Округлые:

Северное сияние

Круг:

лес

Граничит:

Горы

Текст:

Природа
Природа

Округлые изображение

Норвегия

W3 круглый класс добавляет закругленные углы к изображению:

пример

<img src="img_fjords.jpg" class="w3-round" alt="Norway">
Попробуй сам "

Объезжанная изображение

Норвегия

Класс w3-круг формирует изображение в круг:

пример

<img src="fjords.jpg" class="w3-circle" alt="Norway">
Попробуй сам "

Выложенные изображение

Норвегия

Класс w3 границы добавляет границы вокруг изображения:

пример

<img src="fjords.jpg" class="w3-border w3-padding" alt="Norway">
Попробуй сам "

Hoverable изображение

Норвегия

Класс w3-парят-непрозрачности добавляет прозрачность к изображению курсора мыши над:

пример

<img src="fjords.jpg" class="w3-hover-opacity" alt="Norway">
Попробуй сам "

Изображение в качестве карты

Заверните любой из W3-карты- * классов вокруг элемента <IMG> , чтобы отобразить его в виде карты (добавить тени):

огни

Человек

Саймон

Босс всех боссов


пример

<div class="w3-card-4">
  <img src="img_avatar.png" alt="Person">
</div>
Попробуй сам "

Текст изображения

Поместите текст в изображении с W3-дисплей- классов:

огни

Верхний левый

В правом верхнем углу

Нижняя левая

Внизу справа

средний

пример

<div class="w3-display-container">
  <img src="img_lights.jpg" alt="Lights">
  <div class="w3-display-topleft w3-container">Top Left</div>
  <div class="w3-display-topright w3-container">Top Right</div>
  <div class="w3-display-bottomleft w3-container">Bottom Left</div>
  <div class="w3-display-bottomright w3-container">Bottom Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
</div>
Попробуй сам "

Построение фотоальбом

В этом примере мы используем систему Отзывчивый сетки W3.CSS создать фотоальбом, который хорошо выглядит на всех устройствах. Вы узнаете больше об этом позже.

Лето 2015

5 Terre

Монтероссо

Верназза

Manarola

Corniglia

Риомаджоре


пример

<div class="w3-third">
  <div class="w3-card-2">
    <img src="img_monterosso.png" style="width:100%">
    <div class="w3-container">
      <h4>Monterosso</h4>
    </div>
  </div>
</div>
Попробуй сам "