Галерея на CSS

06.08.2018
Каталог статей

ПоделитьсяTweetПоделитьсяGoogle

2014-03-26_155025-2385054Всем привет! Продолжаем наши уроки по созданию сайтов, блогов.

В этой статье о том как можно сделать галерею без плагинов , только на одном CSS3. Что соответственно не нагружает сам движёк и вообще не зависит на каком движке сайт. Можно ставить на любой вебресурс HTML имеющий стиль CSS. Также загнать её в Landing Page по теме и любоваться самому или показать другим, чтоб зависть заела  🙁

В конце статьи видеоролик о том, как я боролся с галереей  :mail:

Представлю сначала все коды для самостоятельного решения, а потом дам готовые файлы. Бери и вставляй…

Пропишем в дивах элементы, их будет 12 , можно меньше или больше, но 12 смотрится лучше. То есть 12 изображений. Пропишем  атрибут таблицы tabindex

 Копируем вот этот код

Этот код пойдёт в документ html, то ли вы его в Дримвивере создаёте, то ли в notepad++ Теперь необходимо задать в 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

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

/* Gallery start */

.gallery {

margin: 100px auto ;

width: 800px;

}

.gallery a {

display: inline-block;

height: 135px;

position: relative;

width: 180px;

/* CSS3 Prevent selections */

-moz-user-select: none;

-webkit-user-select: none;

-khtml-user-select: none;

user-select: none;

}

.gallery a img {

border: 8px solid #fff;

border-bottom: 20px solid #fff;

cursor: pointer;

display: block;

height: 100%;

left: 0px;

position: absolute;

top: 0px;

width: 100%;

z-index: 1;

/* CSS3 Box sizing property */

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

/* CSS3 transition rules */

-webkit-transition: all 1.0s ease;

-moz-transition: all 1.0s ease;

-o-transition: all 1.0s ease;

transition: all 1.0s ease;

/* CSS3 Box Shadow */

-moz-box-shadow: 2px 2px 4px #444;

-webkit-box-shadow: 2px 2px 4px #444;

-o-box-shadow: 2px 2px 4px #444;

box-shadow: 2px 2px 4px #444;

}

/* Custom CSS3 rotate transformation */

.gallery a:nth-child(1) img {

-moz-transform: rotate(-25deg);

-webkit-transform: rotate(-25deg);

transform: rotate(-25deg);

}

.gallery a:nth-child(2) img {

-moz-transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

transform: rotate(-20deg);

}

.gallery a:nth-child(3) img {

-moz-transform: rotate(-15deg);

-webkit-transform: rotate(-15deg);

transform: rotate(-15deg);

}

.gallery a:nth-child(4) img {

-moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.gallery a:nth-child(5) img {

-moz-transform: rotate(-5deg);

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

.gallery a:nth-child(6) img {

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.gallery a:nth-child(7) img {

-moz-transform: rotate(5deg);

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

.gallery a:nth-child(8) img {

-moz-transform: rotate(10deg);

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

.gallery a:nth-child(9) img {

-moz-transform: rotate(15deg);

-webkit-transform: rotate(15deg);

transform: rotate(15deg);

}

.gallery a:nth-child(10) img {

-moz-transform: rotate(20deg);

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

.gallery a:nth-child(11) img {

-moz-transform: rotate(25deg);

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}

.gallery a:nth-child(12) img {

-moz-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

.gallery a:focus img {

cursor: default;

height: 250%;

left: -150px;

top: -100px;

position: absolute;

width: 250%;

z-index: 25;

/* CSS3 transition rules */

-webkit-transition: all 1.0s ease;

-moz-transition: all 1.0s ease;

-o-transition: all 1.0s ease;

transition: all 1.0s ease;

/* CSS3 transform rules */

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

Надеюсь все понимают, что это стили и их надо в отдельный файл или добавить в уже готовый файл стилей того документа в который вставляете галерею . HTML код допустим в Landing Page расширения .html, а этот код, самый длинный который, в файл стилей с расширением .css, обычно это style.css тогда всё у вас заработает.

Для вашего удобства я пошёл на крайние меры  🙂  приготовил всё как есть, чтобы работало и сложил в архив. Вам осталось только просмотреть архив, разархивировать в папку и немного отредактировать.

animateddude-5432776

 просмотреть>>

Что именно редактировать, это название вашего документа и самой галереи

Например «Галерея цветов» или «Мои автомобили», чтобы выглядело вот так

 

Пропишите адрес для кнопки возврата и выберите любой хостинг картинок. Складируете их в папку с таким же названием как в скачанном архиве imag-3 . Берёте 12 штук, при скачивании даёте им названия как в оригинальной папке (1, 2, 3, 4 …, 12) и меняете папку . Теперь ваши изображения заряжены в галерее.

Закидываете общую папку с картинками, HTML -файлом и стилями себе на хостинг в корень блога (сайта) по FTP — доступу

ЧИТАТЬ:  Урок №9 Как создать карту сайта для людей.

Пишите статью где рассказываете какая у вас красивая галерея фотографий или рисунков, вообщем всё на ваше усмотрение. И в статье по ссылке с любым анкором, например посмотреть>> переход на адрес галереи, который после загрузки на хостинг в корень блога будет  http://www. ваш домен.ru/gallery/galer.html

Так же можете вместо ссылки

Метки: ,