Как сделать чтобы размер <figure> автоматически подстраивался под размер картинки?

#вёрстка #адаптивная_верстка

Как сделать чтобы размер 
 автоматически подстраивался под размер картинки,
которая внутри него находится?  




    
    
figure caption test 




    

Ответы

Ответ 1

figure {
  display: inline-block;
  border: 2px solid red;
}

  
  
figure caption test 



Ответ 2

Можно использовать width:min-content;



figure {
  display: inline-block;
  border: 2px solid red;
  width: min-content;
}

  
  
figure caption test figure caption test figure caption test figure
caption test figure caption test figure caption test figure caption test figure caption
test 

Геометрическая фигура (параллелограм) на CSS

#html #css #css3 #вёрстка #адаптивная_верстка

Всем привет! 
Возможно, вопрос для многих очень прост, но всё же. Мне надоело использовать картинку,
и хочу понемногу расти. Подскажите пожалуйста, как реализовать такую геометрическую
фигуру (она должна быть адаптивной): 


    

Ответы

Ответ 1

Это делается с помощью skew:



* {
  margin: 0;
  padding: 0;
}

div {
  margin: 20px;
  padding: 0;
  position: relative;
  width: 75px;
  height: 25px;
  color: #ffffff;
}

p {
  position: absolute;
  background-color: blue;
  width: 100%;
  height: 100%;
  transform: skew(15deg)
}

span {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1.5;
}

  

  
    Lorem
  





Вариант на SVG с тем же skew:

Медиа-запрос или аналог относительно родителя, а не вьюпорта или экрана

#media_queries #html #адаптивная_верстка #css #вёрстка

Имеется вот такой блок:



Хотелось бы сделать так, чтобы при достаточности ширины он трансформировался в такой
блок:



Как писать свойства - понятно: заменить инлайн-блоки на блоки, добавить отступы и т.д.

С запросами, на первый взгляд, тоже понятно. Пишем что-то типа:

.selector {
    свойства для телефонов
}

@media screen and (min-width: 768px) {
    .selector {
        свойства для планшетов и десктов
    }    
}


Но как быть в случае, если этот блок встречается на разных страницах и в одном случае
брейкпойнтом должно быть 768px, а в другом 1024px, например? Например, на одной странице
есть сайдбар, уменьшающий пространство, а на другой нету.





Получается, что этот запрос нужно делать относительно родителя. Если, например, родитель
400+ пикселей, то применяем свойства выстраивающие элементы блока колонками.

Медиазапрос должен выглядеть как-то так:

@media (ширина контекста: 480px) { ... }


Подскажите, пожалуйста, есть ли возможность организовать медиазапросы таким образом?

Другими слова: я вижу, что этот блок должен трансформироваться, если есть свободных
400px, но как мне определить, что ширина родителя 400+? Медиазапросом я могу определить
только ширину вьюпорта или экрана и она не всягда связана с шириной родителя.

Я пока что вижу два варианта:

а) На разных страницах проставлять нашему блоку разные классы, например

@media screen and (min-width: 768px) {
    .selector_unfold-on768 { ... }
}
@media screen and (min-width: 1024px) {
    .selector_unfold-on1024 { ... }
}


Но тогда придется дублировать одни и теже свойства (ну или убирать в миксины и инклюдить).

б) отказаться от медиа-запросов как таковых и пасть JS`ом.
    

Ответы

Ответ 1

Верно мыслите, тут либо через классы либо JS, ибо медиа запросы не умеют работать
с DOM элементами


Ответ 2

Подозреваю, что такое можно сделать с помощью flexbox.

Media-запросы работают только с viewport'ом.

Занять div`ом всю оставшуюся высоту. Как?

#html #css #вёрстка #bootstrap #адаптивная_верстка

Использую Bootstrtap 4. div-у с классом h100percent необходимо занять всю оставшуюся
высоту в div-е wrapper. При этом Header фиксированной высоты располагается сверху,
а footer фиксированной высоты снизу. Высота блока 100% т.е. разная от монитора к монитору.

P.S. В div .h100percent будет другой див размером больше него самого, т.е. должна
быть полоса прокрутки overflow: auto. h100percent должен занять оставшееся место по
высоте от футера и хэдера.
P.P.S "Как всегда прижимать footer к низу экрана?" не решает моей проблемы, там блок
контента не занимает все оставшуюся высоту.



div {
  padding: 10px;
}

.wrapper {
  position: fixed;
  width: 300px;
  height: 100%;
}

.h100percent {
  /* Занять все оставшееся место */
}



  
  
  

  
  
  
  
  

  




  

    

      


        
Header

        
Этот
блок должен занять всю оставшуюся высоту

        
Foter
      
    
  







    

Ответы

Ответ 1

Для такой задачи подходит flex-box. Нужно разместить блоки в контейнере flex 100%-высоты,
а в блок, который нужно растянуть, добавить правило  flex-grow 



.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

body {
  margin: 0;
  padding: 0
}

.header {
  background: green
}

.h100 {
  background: yellow;
  flex-grow: 3
}

.footer {
  background: red
}

  
Верхний блок
  
Контент
  
Нижний блок



Ответ 2

Если header и footer фиксированной высоты, допустим по 70px, можно сделать так:

.h100percent {
  height: calc(100vh - 140px);
}


Тогда ваш .h100percent получит высоту, равную высоте окна браузера и вычтет высоту
хедер+футер

Как сверстать border, аналогичный комбинации fieldset и legend?

#html #css #bootstrap #адаптивная_верстка

Как сверстать такой border?



Сайт на bootstrap, то есть он не должен сползать.
Сейчас сверстан с помощью legend и fieldset, что не поддерживается в ie8 и ранних
версиях opera.
http://v.testjay.esy.es/
    

Ответы

Ответ 1

Можно так http://jsfiddle.net/rpmv8u9k/ - заголовок абсолютом сделан, минус в том,
что заголовок если увеличиться, он не двигает текст.

Или так http://jsfiddle.net/vnLw754b/ - заголовок через отрицательный margin, текст
двигает, но позиционирование линий зависит от размера падинга у div, если он изменился
нужно менять и отрицательный left/right у линий. Хотя это не проблема, можно падинг
не указывать для div, а указать только для текста внутри.

Если заголовок не меняется, то подойдут оба варианта, если меняется, то второй.

Сложный декоративный заголовок с двумя отдельными границами

#html #css #html5 #css3 #адаптивная_верстка

Какое решение Вы можете предложить для создания такого заголовка?



Как видите, левая полоска не явлется border-left, т. к. её длина (вернее, высота)
не равна истинной высоте блока.

Я сам пробовал "нарисовать" левую полоску вручную, т. е. в виде отедльного блока
со стилями и позиционированием, но мне такое решение не очень нравится, потому как
совершенно лишено адаптивности (в мобильных версиях заголовки могут не уместиться в
одну строку). Что-нибудь ещё возможно?
    

Ответы

Ответ 1

В таких случаях традиционно пользуются псевдо-элементами ::before и ::after, потому
что они позволяют экономить на мусоре в разметке.

Собственно, одну полоску рисуем бордером, другую — псевдо-элементом. По-моему, выбор
произвольный. Я не заметил, чтобы это вызывало какие-то проблемы на узких экранах.
(Или я неправильно понял ваше задание — у вас многострочный пример отсутствует.)



h1 {
  position: relative;
  padding: 3px 5px;
  border-left: 3px #666 solid;
}
h1::after {
  content: " ";
  display: block; position: absolute;
  left: -3px; right: 0; bottom: -5px; height: 2px;
  background: #888;
}

  
Hello world!


  
Hello world!

Как сделать такие пятиугольники (+адаптивные) через css?

#html #css #css3 #svg #адаптивная_верстка

Думаю, что их стоит сделать svg polygon, но как это лучше реализовать, чтобы они
и адаптивными были и подгонялись под ширину блока, в котором находятся?


    

Ответы

Ответ 1

Решение SVG

Решение адаптивно. Работает во всех браузерах.  

Вёрстка не сломается при изменении масштаба, так как все оформительские элементы:
текст, патч, градиент находятся внутри SVG
Если будет необходимость поменять начальные размеры блока, то нужно изменить проценты
родительского контейнера .container



.container {
  width: 30%;
  height: auto;
  box-shadow: 0 0 4px #131824;
}

  



Ответ 2

А чтобы была адаптивной,  ее надо внедрить как фоновую картинку.

Сохранить сей пример в отдельном файле name.svg


  background-Image: url(путь к файлу name.svg);
  
  background-size: cover;


И второй вариант. Прописать прямо в css.

background: url('data:image/svg+xml;utf8, ');
 background-size: cover;







Ответ 3

Решение CSS clip-path. Но надо учесть тот факт, что в IE && EDGE, работать не будет.



.triangle {
  width: 250px;
  height: 140px;
  background: linear-gradient(45deg, #FFDD00, #FF00AE);
  -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 60%, 50% 100%, 0 60%);
  clip-path: polygon(0% 0%, 100% 0, 100% 60%, 50% 100%, 0 60%);
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 40px;
  font-family: sans-serif;
}

.card {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  color: #aaa;
  border: 1px solid #ccc;
  display: inline-block;
}

.title {
  text-align: center;
  color: #333;
  font-size: 30px;
  padding: 10px;
  display: block;
}

    Standard
  

    24.0
  
  

    
 bla bla bla
    
 bla bla bla
    
 bla bla bla
    
 bla bla bla
    
 bla bla bla
  

Верстка квадратных блоков в bootstrap

#html #css #вёрстка #bootstrap #адаптивная_верстка

Представьте страницу, на которой размещён какой-то текст, а справа завёрстаны квадратные
обложки альбомов. Пример, который нашёл в сети:



Обложки альбомов -- штука стандартная, на яндекс:музыке например все обложки -- это
картинки 500х500 пикселей.

И вот у меня есть допустим, 9 картинок 500х500, есть сетка бутстрап.

Как верстать такое? Хочу понять сам принцип, как это делается.

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

Код тоже приветствуется, но больше интересует объяснение фокуса самого принципа работы.
    

Ответы

Ответ 1

Через display: grid (спасибо @diraria за наводку на такую чудесную технологию) это
оказалось сделать достаточно просто:


    

        
Альбомы выпущенные на студии
        
На студии с 2000 года было выпущено более 123 альбомов blah-blah-blah...
        

            @foreach($albums as $album)
            

               
            
            @endforeach
        
    



И в css:

#albums .placeholder_albums {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: repeat(2, 250px);
}

#albums .placeholder_albums img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


Этот пример был в статье, осталось чуть допилить, чтобы размер по вертикали совпадал
с горизонталью:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: repeat(2, minmax(250px, 1fr));

Уменьшить svg картинки пропорционально

#html #css #svg #адаптивная_верстка #оптимизация_сайтов

Нужно по изменению окна браузера уменьшать пропорционально или возвращать в обычное
состояние отдельные объекты svg. Напишите пример пожалуйста, чтобы хоть знать, что к чему. 


    

Ответы

Ответ 1

Примерно так , указываем viewBox и всё остальное само становится резиновым 

я не преследовал цель сделать один в один

Диагональный слайдер контента

#jquery #адаптивная_верстка #html #вёрстка #css

Приветствую, знатоки.

Пришла ко мне задача запилить вот такой слайдер:


На удивление, гугл ничем мне не помог, поэтому прошу помощи у вас.
Может кто встречался с аналогичной задачей или может подсказать в каком направлении
мне продолжить поиск?
    

Ответы

Ответ 1

Вот, я сделал очень хитрую конструкцию: http://jsfiddle.net/6b9gjagL/3/
HTML:

    
1st


    
2nd

...

Весь необходимый контент должен лежать в .bg как обычно.
CSS:
.skew {
    height: 400px;
    width: 400px;
    overflow: hidden;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
    border-bottom: 5px solid white;
}
.bg {
    height: 500px;
    width: 400px;
    -webkit-transform: skewY(10deg);
    transform: skewY(10deg);
    padding-top: 35px;
}

.skew наклонен на -10 градусов. А внутри него находится .bg, наклоненный на 10. Так
.bg оказывается не наклонен, зато белая граница — наклонена. Чтобы избежать белых полей
.bg больше .skew.
JS:
$(document).on('ready scroll', function (e) {
    $('.bg').each(function (num) {
        $(this).css('margin-top', (-(num * 405) + $(window).scrollTop()) + 'px');
    });
});

Все просто: мы поднимаем все .bg так, чтобы их начала были на уровне верха страницы.
Если высота окна будет больше высоты .bg, получится белое пятно, так что высоты элементов
тоже стоит контролировать из JS. Обратите внимание на -(num * 405). Если .skew будут
разного размера, нужно просуммировать высоту всего,что находится до текущего .bg
Кстати, решение работает даже если трансформации не поддерживаются. Граница просто
перестанет быть наклонной.

Как сделать прелодер изображения, сохраняющий пропорции оригинального файла?

#html #css #вёрстка #адаптивная_верстка

Есть картинка-заглушка, выполняющая роль прелодера загружаемой картинки. Размеры
загружаемой картинки известны и выведены в теге. Я так-же сделал у тега img max-width:100%,
чтобы картинка не выходила за края страницы на маленьких экранах. 

С оригинальной картинкой все работает хорошо, (чтобы сохранялись пропорции, я написал
height:auto) Но когда ставим заглушку 1х1, пропорции картинки берутся соответственно
1 к 1, а не те, что указаны в теге. Если убрать height:auto ситуация все равно не решается,
т.к. размер остается 200, а должен быть меньше.



img{
  max-width:100%;
  height:auto;
}





Есть ли способ сделать здесь масштабирование с сохранением необходимых пропорций,
не прибегая к JS?

Все картинки разных размеров, есть возможность что-то сделать при подстановке заглушек.
Некоторые картинки меньше экрана, некоторые — больше. Кроме картинок ничего нет, вокруг
теги 
 с текстом
    

Ответы

Ответ 1

Решил задачу таким образом. 

Можно на лету создавать изображения в формате SVG того-же размера.




Полученный код закодировать и вставить в атрибут src изображения.




Пример реализации на JS:



$('img').each(function() {

  //получаем размер изображения
  iw = $(this).attr('width')
  ih = $(this).attr('height')
    //Проверяем, есть ли размеры
  if (iw !== undefined && ih !== undefined) {
    //Создаем SVG с размерами изображения:
    svg = '';
    //Вставляем картинку прямо в тег:
    $(this).attr("src", "data:image/svg+xml," + encodeURI(svg));
  }

})
img {
  max-width: 100%;
  height: auto;
  background: #03ded7;
}




Ответ 2

А что если через background-image, и background-size:cover


Ответ 3

Если не менять код, а только заменять картинку, то через CSS нет способа это сделать.
Картинки всё равно будут использовать пропорции подмены. Но если у вас картинки более-менее
стандартного размера, то можно попробовать использовать не однопиксельную картинку,
а картинку с теми же пропорциями.

Например, картинка в формате PNG с пропорциональными нужным вам размерами 15х2 пикселей
имеет размер лишь 95 байт. Такую картинку лучше будет подключать по схеме data:, иначе
вы на HTTP заголовки потратите больше. (Картинка полного размера занимает лишь немного
больше - 144 байта.)

Если же HTML код всё-таки можно поменять, то тут вариантов множество.

Как правильно верстать макет, когда ширина экрана меньше ширины макета в пикселях?

#html #css #вёрстка #адаптивная_верстка #media_queries

Ширина макета 1920px.
Ширина монитора 1600px.
Вопрос: как правильно верстать такой макет и соблюсти все размеры и отступы?
    

Ответы

Ответ 1

1 - Уточните у заказчика, что он в курсе, что дизайнер сделал такой широкий макет.
Предупредите, что без адаптивизации хорошо будет смотреться только на больших мониторах.
Порой заказчики могут проглядеть ширину в макете дизайнера, не обратить внимания.

2 - Можете воспользоваться в дев тулс в хроме toggle device toolbar ctrl+shift+m.
Там, в режиме reponsive можно вручную задать экрану ширину больше, чем монитор, при
этом автоматически подберется зум. Работать будет даже пиксель перфект, однако будет
достаточно мелко.

3 - Можете задать изначально для body в стилях фиксированную минимальную ширину равную
1920px. Появится горизонтальный скролл, и вы будете верстать пиксель в пиксель, не
очень удобно конечно скроллить, однако не будет мелко, как в предыдущем варианте.



Причем, обратите внимание, что обратный зум не покажет вам реальной картины, и результат
верстки может отличаться от настоящих больших экранов.

Обратный зум - это когда нажимаете ctrl+- в хроме например, т.е 90%, 75% и.т.д.

Responsive clip-path

#css #css3 #svg #адаптивная_верстка #clip_path

В следующем примере блок main (синезелёный градиент) обрезается при помощи clip-path
и принимает форму сердечка. Однако видно, что он обрезается в масштабе 1:1, а хотелось
бы, чтобы форма обрезки растягивалась по размеру блока (по аналогии с тем, как у background-size
работает cover, contain или 100% 100%).

https://jsfiddle.net/a5goLyds/



html, body, main {
  margin: 0;
  height: 100%;
}

svg {
  width: 10em;
  float: right;
  position: relative;
  z-index: 1;
}

main {
  background: linear-gradient(to bottom, green, blue);
  clip-path: url(#heart-clip);
}






    

Ответы

Ответ 1

К сожалению я не нашёл clip-path генераторов, которые позволяли бы рисовать кривыми
линиями. 

Есть генераторы, которые рисуют прямыми линиями по узловым точкам:


https://codepen.io/jh3y/pen/XqVQqa 
http://bennettfeely.com/clippy/     


Для многоугольника получаю вот такие значения

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%,
0% 70%, 0% 35%, 20% 10%);  


Преобразую для svg clip-path в доли от единицы:

  


Чтобы получить масштабируемый clip-path, например при наведении курсора, нужно менять
размер изображения в сторону увеличения, соответственно увеличится и clip-path, обрезая
это изображение.  



svg {}

main {
  width: 15%;
  height: 15%;
  background: linear-gradient(to bottom, green, blue);
  clip-path: url(#heart-clip);
  transition: 1s;
}

main:hover {
  width: 100%;
  height: 100%;
}

  



Ответ 2

Ничего не меняя в авторском примере - ввожу туда:  

  


Итог:  



html,
body,
main {
  margin: 0;
  height: 100%;
}

svg {
  width: 10em;
  float: right;
  position: relative;
  z-index: 1;
}

main {
  background: linear-gradient(to bottom, green, blue);
  clip-path: url(#heart-clip);
}







В результате можно добиться любой пропорции и положения патча, регулируя лишь
transform="scale(what), translate(x y)"  

Однако это ещё не всё.  

Там, где было , добавим clipPathUnits="objectBoundingBox",
но при этом не забудем подкорректировать  scale(), чтобы результат от "d" всегда был
меньше единицы, как у Александра в полигоне.
- И вот оно, долгожданное счастье!  


Responsive clip-path!!!  


В песочнице будет легче менять размеры рабочей области, чтобы убедиться в искомой
"респонсивности" элемента.
Но пробуем описать его и здесь:  



html, body {
  margin: 0;
  background: repeating-linear-gradient(45deg, #666, #222, #666, #ea8, #666, #222,
#666, #8ce, #666 4%) fixed;
}

svg {
  width: 10rem;
  float: right;
  position: relative;
  z-index: 1;
}

main {
  height: 100vw;
  clip-path: url(#heart-clip);
  background: linear-gradient(to bottom, blue, red, green, transparent 70%);
}





Ответ 3

Я бы реализовал так, а градиент уже реализовал бы в самом SVG



html,
body {
  width: 100%;
  height: 100%;
  background: #242424;
}

main {
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml, ');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Что такое Bootstrap? [закрыт]

#html #css #bootstrap #адаптивная_верстка

        
             
                
                    
                        
                            Closed. This question needs to be more focused. It is
not currently accepting answers.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Want to improve this question? Update the question so
it focuses on one problem only by editing this post.
                        
                        Closed 2 года назад.
                                                                                
           
                
        
Объясните понятным языком, что это такое?

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

Что делать с макетом? Заново всё переписывать, что ли?
И где лучше всего изучать Bootstrap?
    

Ответы

Ответ 1

Рекомендую учебный раздел на Webreference.ru. Там изложены базовые понятия Бутстрапа,
а  рядом — справочники по CSS и HTML.

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

Зато можно подключать Бутстрап, но использовать его только там, где нужно.

Поэтому предлагаю продвигаться небольшими шагами. Выберите одну локальную задачу
и решите её с помощью Бутстрапа. Например, добавьте слайдер из Бутстрапа или перепишите
на Бутстрапе один из блоков на своём сайте.

Посмотрите как устроены базовые примеры. HTML-коды для слайдера и других модулей
приведены в документации по ним.

Сделайте себе заготовку HTML-страницы, которая подключает Джиквери и Бутстрап с CDN,
чтобы было легче тренероваться и проверять чужие решения. Например:




  
  
  
  
  
  
  


  

  

  
  

 


Практиковаться удобно на https://codepen.io/ Там стили и скрипты Бутстрапа можно
подключать из выпадающего меню.

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


Ответ 2

Википедия:


  Это свободный набор инструментов для создания сайтов и веб-приложений. Включает
в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков
навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
  
  Bootstrap использует современные наработки в области CSS и HTML, поэтому необходимо
быть внимательным при поддержке старых браузеров.


Вот Вам как вариант документация на русском языке http://bootstrap-3.ru/index.php


Ответ 3

Настраиваемый HTML, CSS и Javascript фреймворк для более быстрой и удобной Web-разработки.
Начать его изучать вы можете по урокам здесь.


Ответ 4

В bootstrap используется как я называю классовая верстка т.е. .class.

С помощью этого фреймворка можно создавать адаптивные сайты.

Скачать четвертую версию можно с этого сайта а третью здесь. 

А насчет макета скорее всего заново. Вот несколько документаций http://bootstrap-3.ru/
 http://bootstrap-ru.com/ http://mybootstrap.ru/

Как выравнивать блоки по центру не сломав wrap?

#html #css #вёрстка #адаптивная_верстка #flexbox

Допустим есть блоки



.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: #fff;
}

.box {
  width: 170px;
  height: 130px;
  border-radius: 3px;
  border: dashed 2px rgba(0, 0, 0, 0.1);
  margin: 10px;
}

  

  

  

  

  






Мне нужно чтобы последние блоки прижимались к левому краю, но при этом чтобы вся
конструкция блоков была по центру, т.е. будто там указан justify-content: center.

Можно задать фиксированную ширину, но проблема в том что .main резиновый.

На jsfiddle это хорошо видно.

Если уменьшать или увеличивать область отображения то будет работать warp, но при
этом справа будет много свободного пространства
    

Ответы

Ответ 1

.main {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 170px);
  max-width: 890px;
  margin: auto;
  justify-content: center;
}

.box {
  height: 130px;
  border-radius: 3px;
  border: dashed 2px rgba(0, 0, 0, 0.1);
}

  

  

  

  

  




Ответ 2

Как вариант 



*,
:before,
:after {
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
}

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
}

.box {
    width: 170px;
    height: 130px;
    border-radius: 3px;
    border: dashed 2px rgba(0, 0, 0, 0.1);
    margin: 10px;
}

.box:empty {
    height: 0;
    border: none;    
    margin-top: 0;
    margin-bottom: 0;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  

  

  

  

  

  

  
  



Ответ 3

Можно обернуть блоки в еще один блок которому задаешь justify-content: flex-start;
и изменять его ширину через @media, а блоку .main задать justify-content: center;

Адаптивный поворот текста

#html #css #вёрстка #адаптивная_верстка

Нужно сделать заголовок адаптивного блока с поворотом. Загвоздка в том, что блок
адаптивный, ширина меняется относительно экрана, и высота может быть сколь угодно разная,
в зависимости от внутреннего содержания. При повороте нужно учесть на какую ширину
и высоту сместится блок при повороте, а она получается разная. Текст съезжает, ведь
ширина становится высотой, а высота шириной. Помогите разобраться.

Как сохранить пропорции текста? Добавить еще одну обертку и повернуть в обратную
сторону? Возможно ли это только с помощью css?

Желаемый результат, заголовок(красным) должен быть расположен по центру, по вертикали
и по горизонтали:



Сейчас вот так:



Пример кода:



.block{
  position:relative;
  padding-left:5rem;
  margin:0 auto;
  width:50%;
}
.pin{
  position:absolute;
  display:block;
  top:0;
  left:0;
  bottom:0;
  width:3rem;
  height:100%;
  background:rgba(221, 221, 221, 0.5);
}
.pin span{
  position:absolute;
  display:inline-block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  vertical-align:bottom;
  text-align:center;
  transform:rotate(-90deg);
  background:rgba(221, 221, 221, 0.5);
  color:red;
}

  
Заголовок
  
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст




    

Ответы

Ответ 1

Используем предназначенный для этих целей writing-mode: vertical-lr + transform:
rotate(180deg). Центрировать надпись внутри будем при помощи флексбокса.



.block{
  position:relative;
  padding-left:5rem;
  margin:0 auto;
  width:50%;
}
.pin{
  position:absolute;
  display:block;
  top:0;
  left:0;
  bottom:0;
  width:3rem;
  height:100%;
  background:rgba(221, 221, 221, 0.5);
  writing-mode: vertical-lr;
  display: flex;
}
.pin span{
  margin: auto;
  transform: rotate(180deg);
}

  
Заголовок
  
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст



Ответ 2

Вот так работает, но только если текст в одну строку, без переносов.



.block {
  margin: 0 auto;
  padding-left: 5rem;
  position: relative;
  width: 50%;
}

.pin {
  background: rgba(221, 221, 221, 0.5);
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 3rem;
}

.pin span {
  bottom: 50%;
  color: red;
  display: inline-block;
  left: -500px;
  position: absolute;
  right: -500px;
  text-align: center;
  transform-origin: center center 0;
  transform: rotate(-90deg);
  white-space:nowrap;
}

  
Заголовок

  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст





Или смотреть код на jsfiddle


Ответ 3

Так вроде ... без всяких трудностей



*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.r{
width:50px;
height:100%;
background:#ccc;
text-align:center;
line-height:50px;
-webkit-writing-mode: vertical-rl;
writing-mode:tb-rl;
 font: Consolas, Monaco, monospace;
}
.r span{
display:inline-block;
transform:rotate(-90deg);
font-size:30px;
height:4vh;
color:#fff;
}
@media screen and (max-height:520px){
.r span{
	display:inline-block;
	height:6vh;
}
}

	п
	р
	и
	м
	е
	р

Галерея с изображениями разными по ширине

#javascript #html #css #адаптивная_верстка

Как реализовать галерею с изображениями, разными по ширине, но фиксированными по высоте? 

Необходимо, чтобы изображения сами распределялись и ужимались в зависимости от места
в блоке div. Есть скрипт masonry, но там, как я понял, такая штука работает только
по вертикали.

Как примерно должно выглядеть, показано на рисунке:


    

Ответы

Ответ 1

Можно подключить плагин который автоматически будет выводить фото Например:

Демо 1, 2, 3, 4, 5 ...

Там сверху есть ссылка ( CollagePlus jQuery Plugin Example ) где можно скачать плагин.

Успехов.


Ответ 2

Фиксированная высота, под которую подгоняется картинка, и выравнивание по двум краям
с пустотами между картинками?

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

Как изменить картинку на сайте при определенном разрешении?

#javascript #html #css #адаптивная_верстка

Необходимо, чтобы при мобильном разрешении была одна картинка, а при десктопном разрешении
- другая. Как это можно осуществить?
    

Ответы

Ответ 1

Медиа-запрос
Допустим, по дефолту имеем background-image:url("images/main.png");
И определяем медиа-запрос для девайсов с разрешением от 320 до 500 пикселей:

@media (min-width:320px) and (max-width:500px) {
    .your-block {
         background-image:url("images/mobile.png");
    }
}


Если нужно, чтобы менялась именно содержательная картинка(вставленная с помощью тега
img в ваш html - алгоритм тот же, только у вас должно быть две картинки, допустим одна
имеет класс mobile-img, вторая соответственно  main-img. И получаете что-то вроде вот
такого css

.mobile-img {
    display:none;
}

 @media (min-width:320px) and (max-width:500px) {
    .mobile-img {
         display:block;
    }
    .main-img {
        display: none;
    }
}


Ответ 2

Смотрите в сторону атрибутов srcset, sizes у элемента img или используйте возможности
элемента picture. Элемент picture имеет более «продвинутые» возможности.

Можно не только изменять (увеличивать или уменьшать) фактический размер картинки
при различных плотностях или разрешения экрана устройства, но, например, отобразить
вместо альбомной картинки — картинку портретной ориентации, что порой бывает полезно
при создании адаптивного/отзывчивого сайта или приложения.

Поддержка браузерами srcset и picture.

Но там где возможно, например для логотипа, лучше использовать векторный формат изображений
— SVG. Формат широко поддерживается браузерами.




    
    
    
    
    


    

        
            
            
            
            
            
        

        
            
            
            
            
            
        




Ответ 3

Если вдруг картинки img и менять разметку никак нельзя, то можно вопрользоваться
таким хаком (будет работать только для фиксированных размеров):



.image {
  background-image: url("https://i.stack.imgur.com/7KXRp.jpg");
  /* Устанавливаем ширину и высоту в 0 */
  width: 0;
  height: 0;
  /* Устанавливаем размеры за счёт padding-left и padding-top */
  padding-left: 300px;
  padding-top: 200px;
  /* Устанавливаем по своему вкусу, здесь изображение будет растигиваться под размеры
блока */
  background-size: 100% 100%;
}

/* медиа запросы с другим фоном */
@media (min-width: 800px) {
  .image {
      background-image: url("https://i.stack.imgur.com/9OcHP.jpg");    
  }
}

В каких браузерах и на каких устройствах проверять адаптивный сайт?

#вёрстка #адаптивная_верстка #кроссбраузерность #фронтенд

Немного занимаюсь в свободное время frontend-ом (по фану) – CSS3, JavaScript, HTML5,
адаптив (чтобы сайт "как игрушка" выглядел, перестраивался динамически под размеры
и повороты экрана).

Первым шагом я тестирую полученное на различных разрешениях в эмуляторе Google Chrome
с помощью "Device Toolbar".

Когда всё готово, долго и муторно проверяю результат по следующему списку:


Mac OS X:


Google Chrome 
Safari 11
TorBrowser

Windows 7, запущенная на VirtualBox под Mac OS X:


Google Chrome
Mozilla Firefox
Opera 45
IE 11

Android 4:


Google Chrome
Android Browser

SimulatorApp 9, запущенный на Mac OS X:


iPhone 4|5|6
iPad 2|Pro|Retina



Интересует опыт профессиональных фронтендщиков:


Насколько оправдан мой список устройств и браузеров для проверки результатов? Вы
бы что-нибудь добавили? Что-нибудь выкинули?
Какой workflow у вас? Как проверяете свои наработки? Ведь это целое адище – протестировать
свой код в разных браузерах и ОС, отнимает много времени.

    

Ответы

Ответ 1

Дисклеймер: я не фронт-энд разработчик, лишь сочувствующий; все выкладки - ИМХО,
подкреплённое набитыми шишками.

Шаг первый, подготовительный.

Определите аудиторию сайта, её технические возможности, цель и место посещения. Это
позволит примерно понять, в каких условиях люди заходят на сайт и что они от него ждут.
Немного примеров навскидку:


Места: из дома, на работе, в транспорте, на детской площадке, в туалете, свисая с
моста на страховке, под дождём на автобусной остановке, в зале ожидания в больнице
Устройства вывода: десктоп, ноутбук, планшет, телефон, старый телефон, консоль /
телевизор, проектор, слуховой или тактильный аппарат
Устройства ввода: мышь, тачпад, сенсорный экран, мини-пульт, клавиатура, голос
Софт и настройки: навороченный браузер, упрощённый браузер, боковая панелька (Opera
<= 12.x, Vivaldi), фрейм в игре (EVE, например) 
Обстоятельства: отдых (лениво почитывая или играя), работа (справка, переводчик),
активность (про мост и страховку - это не шутка), экстренные случаи, нарушения зрения
или координации


Поянтно, что одним сайтом покрыть все варианты невозможно и не нужно; многое зависит
от тематики и соотвутствующей целевой аудитории. Исходя из этого можно оценить, какие
фичи нужны, а чем можно пренебречь, чтобы облегчить разработку.

Шаг второй, аналитический.

Всё программирование - это поиск золотой середины между усилиями и результатом. Чем-то
в любом случае придётся жертвовать (в 2008-м я положил на алтарь свежие плюшки типа
jQuery ради нормальной работы в Opera Mini), и в связи с этим по возможности не надо
делать лишнего. Собственно, любая новая фича будет требовать поддержки на разных уровнях:
изображения, стили, разметка, скрипты, браузерные тесты.

Отсюда два вопроса:


Что требуется от дизайна?
Что от дизайна не требуется?


Постарайтесь максимально формализовать требования к сайту, чтобы их смог понять даже
компьютер. Таким требованием может быть "размер гамбургера от 20 до 40 пикселей" или
"всплывающее окошко не должно заслонять название элемента", а то и "расстояние от этой
ссылки до той кнопки должно уложиться в один свайп по тачпаду". Всё, что такими требованиями
не оговорено, будет считаться допустимой погрешностью - и с этим придётся смириться.

Шаг третий, кибернетический.

Автоматизируйте всё.


  это целое адище – протестировать свой код в разных браузерах и ОС


Есть сервисы, которые позволяют проверять свои сайты на разных платформах, BrowserStack,
например. Все дополнительные фишки платные, но порой хватает и скриншота.

Если подходить более серьёзно - Selenium, есть и обвязки, позволяющие его встроить
в юнит-тесты для веб-приложения. Требования с прошлого этапа вполне реально перенести
на скрипт и регулярно его запускать. Более того, если есть возможность выделить отдельную
машину, Selenium может работать и удалённо, создавая пакеты "логов" на каждый чих.

При наличии автоматизации вопрос проверки в лишнем браузере теряет свою остроту.
Сравнение скриноштов позволит увидеть разницу; история изменений - changelog, а видимые
косяки перейдут в раздел требований и новых тестов.


Ответ 2

Я бы выкинул:


Tor browser


Этот браузер тоже самое что и firefox.

Проверять хром на Windows 7


Не вижу смысла, так как от маковского хрома он ничем не отличается, тогда уж лучше
проверять на xp так как там старая версия хрома - 49.



 

Я бы добавил  


UC browser


Им еще пользуются все-таки лучше проверить

Opera mini


браузер с плохой поддержкой, если проект серьезный то лучше перенаправлять на так
называемую страницу badbrowser

FireFox для мобилы 


Различий вроде не должно быть, но лучше проверить.

Edge 


Новый браузер от microsoft есть небольшие (или большие) отличия от IE. работает только
под windows 8.1 и более





Поддержку некоторых вещей можно посмотреть здесь: https://caniuse.com

Как сверстать блок с линиями отходящими от центральной картинки?

#html #css #вёрстка #svg #адаптивная_верстка

Возможно, кто-то сталкивался с подобными блоками?



Не представляю, как это можно реализовать. Вряд ли получится с помощью абсолютного
позиционирования адаптивно сверстать такое. 

UPD1: Сложность заключается в верстке линий, отходящих от центральной картинки, в
верстке блоков текста ничего сложного для меня нет.
    

Ответы

Ответ 1

Вариант с применением двух изображений

При этом решение используется pattern для добавления второго круглого изображения
в центре. 

Решение адаптивно, вёрстка не сломается при изменении размера окна браузера и при
просмотре на любом гаджете.


Фоновое изображение добавляется с помощью команды:  

 


Затемняется командой - opacity="0.45"
Позиционируется координатами - x и y
Изображение полностью заполняет родительский блок 
 и может
быть вставлено, как самостоятельный элемент в любое место веб страницы. 


Круглое изображение добавляется поверх фонового изображения с помощью
     


 
  
 


Ниже полный код приложения:  



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#45228B;
}







Вариант с применением фильтров

Если выбранное изображение устраивает вас по содержанию, но в связи с требованиями
дизайна нужно сменить цвет оттенка фона или цвет фигур, то совсем не обязательно дорабатывать
картинку в фотошопе, можно её перекрасить с помощью комбинации фильтров: feflood, feComposite,
feBlend
Техника применения этих фильтров подробно объясняется в топике на нашем сайте 

#1 Вариант с покраской фигур  

В фильтре  применяется оператор mode="lighten"  

  



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#D57700;
}







#2 Вариант с покраской фона  

В фильтре  применяется оператор mode="darken"  



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#E1E1E1;
}





Ответ 2

Надеюсь работники офисов не будут на меня в обиде за беззлобную
  шутку-картинку, демонстрирующую их тяжкий повседневный труд. Это скорее сочувствие.
  Может быть вы улыбнетесь, глядя на эту картинку и вам станет легче переносить самодура-начальника
 в повседневности.


Чтобы получить адаптивное приложение, которое будет работать во всех современных
браузерах, необходимо выполнить следующие шаги: 


Загружаем выбранную картинку в векторный редактор и устанавливаем
размеры svg полотна равные ширине и высоте растрового изображения 










В векторном редакторе с помощью инструмента - Рисовать кривые Безье
добавляем нужные контуры линий для размещения поясняющего текста   


   


Сохраняем файл в формате SVG и прогоняем его через оптимизатор
для получения чистого кода без лишнего кода от Inkscape
Чтобы получить центральную, круглую часть изображения более светлую
по сравнению с остальным фоном изображения, применяем комбинированную
маску, где центральный круг имеет атрибут fill="white", что делает
его полностью прозрачным. 

rect имеет более темную закраску fill="#978300", поэтому   фон будет затемненным.  



   
      
  


Добавляем текст


Ниже полный код:  



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#45228B;
}







Та же техника реализации с другой картинкой: 



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#45228B;
}





Ответ 3

Вот SVG вариант.

Я умышленно ставлю вьюбокс наполовину в отрицательную область (viewbox="-100 -100
200 200"), чтобы координата 0,0 была в центре картинки, так легче из головы брать точки
для полилиний без дополнительной арифметики.






Ответ 4

Вариант с помощью псевдоэлемента и CSS. Вместо after можно использовать SVG элемент.



.title {
  position: relative;
  width: 300px;
  border-bottom: 1.5px solid black;
  padding: 5px 10px;
}
.title::after {
  position: absolute;
  right: 16px;
  bottom: -69px;
  width: 100%;
  height: 1.5px;
  background-color: black;
  transform: translateX(100%) rotate(25deg);
  content: "";
}
lorem ipsum