Таблица лидеров


Popular Content

Showing most liked content since 24.01.2017 in all areas

  1. 4 likes
    И снова мы на Web Standards Days в Москве, но теперь уже 28-го января 2017 в офисе Яндекса. И на этот раз не просто на конференции, а на днюхе Ильи! А ещё к нам присоединилась Оксана (sigma77), чему мы были дико рады! И по традиции выкладываю несколько фотографий с конференции... и не только Илья, Оксана и ещё какой-то чувак)) Я и Илья у меня дома И снова у меня дома) А теперь ещё и с моей дорогой хозяюшкой, которая накрыла нам стол и заготовила праздничный торт со свечками И как обычно, чтобы посмотреть фоты в лучшем качестве, жми на каждое из них)
  2. 2 likes
    https://css-tricks.com/creating-non-rectangular-headers/
  3. 1 like
    А вы попробуйте обернуть текст внутри ссылки в спан и ему задать data-toggle="tooltip": <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-placement="left" title="SomeRatherLongTextTextTextText"> <span data-toggle="tooltip">ShortText</span> <b class="caret"></b> </a> <ul class="dropdown-menu">…</ul> <li>
  4. 1 like
  5. 1 like
    Вот может пойдет. Функцию рандома брал отсюда http://learn.javascript.ru/number#случайное-целое-от-min-до-max
  6. 1 like
    inono, 1. id используются для идентификации элементов страницы при выполнении скриптов, для создания якорей. 2. Псевдоэлементы нужны для создания дополнительных сущностей в коде html и последующей их стилизации. Псевдоэлементы я изучал по книге Макфарланда "Большая книга css", но, мне кажется достаточно будет любой статьи по теме и тренировки в песочнице, там все очень просто: https://habrahabr.ru/post/154319/ 3. по дизайну сайта ничего толкового сказать не могу, т.к. не очень в этих вещах разбираюсь. Как рядовой пользователь могу сказать, что явного неприятия дизайн не вызывает, однако и эмоции "офигенно!" тоже.
  7. 1 like
    1) Откажитесь от использования id, чтобы не было проблем с каскадностью. (заодно не придется так часто использовать !important, что тоже не очень хорошо) 2) Названия для стилей лучше давать осмысленные, связанные с предназначением блока, а не с его оформлением (класс h1_and_picture -- не есть гуд, класс section-title уже лучше). 3) Самое главное: очень много лишней разметки, цель которой -- только оформление страницы. Все оформление лучше вынести в css: вместо пустых дивов можно использовать псевдоэлементы, вместо бессмысленного <hr> на логотипе просто использовать нижнюю границу у тега h1 или псевдоэлемент. 4) С шапкой очень мудрено вышло, что-то вроде браузерного фотошопа Зачем обрабатывать эту тяжеленную шапку (http://f0115661.xsph.ru/ik_sauna.jpg) в браузере, накладывая дополнительные слои с фильтрами, градиентами и пр., если все это можно сделать в фотошопе и просто вставить одну уже обработанную картинку? Аналогично в подвале: под логотип студии с прозрачными буквами подкладывается дополнительный слой (дополнительный пустой див в разметке) для того, чтобы сделать эти буквы темнее цветом. 5) По тегам: тегов <nav>, <header>, <footer> на странице может быть несколько, поэтому на перспективу лучше сразу же присваивать им классы и задавать стили не элементу, а классу.
  8. 1 like
    SatoRi, на самом деле все просто: https://jsfiddle.net/Tilonorrinco/xgaawnhb/ Здесь псевдоэлемент (тот, который .wrapper:before) стилизован под рамку, растянут по ширине блока-обертки (80% от wrapper) и отцентрирован по-вертикали.
  9. 1 like
    1) полосы -- фон, который задается либо через изображение, либо через градиент 2) фон этот, скорее всего, присвоен блоку-обертке, который является родительским для двух других блоков (с текстом who we are, what we do) 3) изображения можно обрезать через css, поместив их в контейнер (типа <figure>) с overflow: hidden. Но проще всего обрезать в фотошопе. 4) рамку, разделяющую два блока можно реализовать через псевдоэлемент, присвоенный блоку-обертке, отцентрированный вертикально с помощью абсолютного позиционирования. Псевдоэлемент этот может быть как фиксированной высоты, так и растягивающийся в зависимости от высоты блока-обертки. 5) Сетку можно строить как через флоат, так и через инлайн-блок, у каждого способа свои плюсы и минусы.
  10. 1 like
  11. 1 like
    Сначала мини курсы htmlacademy, если сразу начать с этих курсов, то сэкономите очень много времен. Потом прочитать книги Фримен Эрик, Фримен Элизабет Изучаем HTML, XHTML и CSS и большая книга CSS По этим книгам будете дополнять пробелы. Если сразу начинать с книг, то больше половины, вы будете пропускать. Потом можно будет записаться на базовый интенсив к ним же, для прокачки. Только не учите всякие бутстрапы и т.п., это пока вообще вам не надо и не используйте emmet, вы должны всё в ручную набирать, что бы всё запомнить.
  12. 1 like
    В случае пустоты в ячейке происходит "схлопывание"
  13. 1 like
  14. 1 like
    А в лисе работает :-) И вообще, спецификация говорит, что атрибут src обязательно должен иметь значение. Как минимум, можно вставить пустое изображение: data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  15. 1 like
    Я немного поизвращался в песочнице и получилось вот так: https://jsfiddle.net/bth3uuL4/2/
  16. 1 like
    Скажите спасибо, что и на 700 делают :-D И да, не все такие дизайнеры))
  17. 1 like
  18. 1 like
    <input type="button" value="Кнопка" onClick='location.href="https://www.yandex.ru/"'>
  19. 1 like
    github позволяет редактировать файлы непосредственно через web-интерфейс
  20. 1 like
  21. 1 like
    вот так вы хотели: https://jsfiddle.net/Shamil_2017/oxtLhs5n/6/
  22. 1 like
  23. 1 like
    Там много интересных примеров. Которые могут вам пригодиться.
  24. 1 like
    например так http://www.cssdesk.com/H3n2y
  25. 1 like
  26. 1 like
    :nth-child(2n) - выбирает среди всех дочерних элементов. Нужно использовать псевдокласс :nth-of-type(2n) для выбора элементов определенного типа - https://jsfiddle.net/mrnobody/hd45m3fc/2/
  27. 1 like
  28. 1 like
    Типа такого?
  29. 1 like
    margin: auto; будет работать только если явно установлена ширина/высота (и top = right = bottom = left = 0). Без явных размеров так: /* ... */ p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  30. 1 like
  31. 1 like
    используйте :after К примеру: .accordion-header li { position: relative; padding-right: 15px; /* Чтобы текст не «залазил» на символ*/ } .accordion-header li:after{ position: absolite; font-family: "названиеш шрифта"; /*Если нужен опеределнный шрифт*/ content: "+"; right: 0; /* Если размещаете справа*/ }
  32. 1 like
    Не удивительно, там же якоря... Тут вопрос скорее почему этого НЕ происходит в исходной демке.
  33. 1 like
    Нельзя потому что так делать. Ссылку вкладывать в ссылку.
  34. 1 like
    Не понял о чём Вы, но напишу подробнее. RewriteBase / AddDefaultCharset UTF-8 Это вставляете в ваш файл .htaccess <html> <head> <meta charset="utf-8"> </head> </html> Это в секцию <head> вашего HTML документа.
  35. 1 like
    чет вы перемудрили, сначала вам определиться нужно где вы делаете анимацию в css или js не стоит ее делать и там и там в вашем случае что-то вроде такого можно сделать https://jsfiddle.net/b5uma4re/21/ но на мой взгляд тяжеловато получилось
  36. 1 like
    я бы делал так, https://jsfiddle.net/b5uma4re/17/ но если нужна задержка, то тут мне кажется лучше через animate делать, а не delay
  37. 1 like
    .counter { position: absolute; top: 0; right: 0; } А выпадает он потому, что для .footer жестко задана высота height: 225px;
  38. 1 like
    а почему бы и нет? https://jsfiddle.net/7ap3atk1/1/
  39. 1 like
  40. 1 like
    Интересно, что если сделать переход, скажем, на transform, то тоже будет временно "выскакивать" из обертки. "3d-hack" помог.
  41. 1 like
  42. 1 like
    5 издание 2008г. JavaScript -Подробное руководство (с носорогом), Дэвид Флэнаган. По практике 2008г. Pro JavaScript™ Techniques ( JavaScript Профессиональные приёмы программирования ) John Resig Всем Удачи.