aaron
-
Posts
137 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by aaron
-
-
5 секунд в гугле
@
не, лучше тут спросить
по-русски, это дублирующая навигация, показывающая, где находится пользователь
"Главная >> Категория >> Новость"
а, это breadcrums ("хлебные крошки")! )))
-
Сейчас занимаюсь тем, что пытаюсь "набить руку" на бесплатных макетах. В описании одного из них встретил название спидбар.
Подскажите - это что такое?
-
Подскажите, правильно ли все сделал?
У меня слой wallpaper не центруется по вертикали почему-то. Скорее всего дело в Photoshop - не так вырезал?
-
css по видеоурокам?
Я скоро не удержусь и просмотрю один из таких видеоуроков. Потому что совершенно непонятно, как такое может быть.
Как в видеоуроке можно читать и анализировать код?
Все абсолютно верно сказано.
Но! Для новичка в изучении основ видеоуроки хорошо помогают. Именно для старта. В одном таком уроке может содержаться много информации в доступном виде.
Но выучить по видеоурокам что-то невозможно. Они хороши именно как дополнение к книгам.
Ну и чтение кода - это не обсуждается. )
-
1
-
-
Использую CSS3Ps, доволен. Позволяет значительно сэкономить время на градиентах, бордерах etc. Понятное дело, что мегазакрученный дизайн смысла преобразовывать нет, но тем не менее с простыми задачами справляется на "ура". Есть еще CSSHAT ...но его не пробовал так как жалко 19 долларов, когда бесплатный аналог вполне устраивает.
Да, как раз про CSS3Ps и читал. Правда, через день после его установки Photoshop у меня перестал запускаться вообще. Но причина, скорее всего не в этом плагине. Все заработало после переустановки программы.
-
Недавно по рассылке получил новость о плагине для Photoshop.
Этот плагин в автоматическом режиме преобразовывает выбранные слои макета в CSS правила.
Почитал еще немного и узнал, что такие плагины существуют уже давно их немалое кол-во.
Подскажите, действительно ли такие плагины работоспособны и стоит ли их применять на практике?
-
Я учусь верстать сайты. Занимаюсь по данным видео урокам - курс верстки сайта. Дошел до данного урока "приступаем к CSS". Я знаком с css. Но мне часто не ясно почему автор применяет тот или иной прием. Это именно связанно с написанием css стилей. Что вы мне посоветуете делать?
Вопрос неконкретно задан. Если все неясно - то значит продолжать учить дальше. ))
Смотрел я эти видеоуроки. Лично мне очень понравились и на данном этапе мне кажутся самыми лучшими.
-
Макет не качала, но судя по скринам:
1. выделите нужные слои и склейте их в один, в этом случае эффекты растеризуются (ctrl+ЛКМ на нужных слоях, потом нажать ctrl+e для слияния слоев. получится один слой. клик ЛКМ с зажатым alt по глазику слева от названия слоя скроет все остальные слои в псд-документе, оставив текущий на прозрачном фоне. crop'аете кусок с флагом и заголовком, сохраняете в пнг с прозрачностью)
2. из картинки с шапкой вам нужен только кусок с флагом и названием. остальное сделать на css, это уменьшит килобайты при верстке
header {
background: #bf1919 url('путь_к_куску_с_флагом_и_названием.png') no-repeat 0 0;
border-radius: 16px; /*цифры на угад*/
border-top: 1px solid #d25e5e;
}
и так далее для тех элементов, которые внутри шапки.
Настоящая "магия" горячих клавиш! ))) Ctrl+E - еще ладно, подзабыл. А вот про Alt+ЛКМ - вообще не знал.
Сделал так, как Вы описали. Все получилось, кроме одного момента. При объединении слоев у меня в один слой сливается и фоновый рисунок. А когда crop'ом вырезаю логотип, он остается вместе с ним. Как избавиться от фона в этом случае - не знаю.
У меня получился результат так, как показал mrnobody. Правда, в конце я так и не понял, почему в продублированных слоях я могу безболезненно избавиться от слоя с фоном, а вот в исходном документе - нет (
-
Вот как получилось:
Блин, уголки не закруглились: левый верхний и левый нижний (((. Не знаю как уголки скруглить
.Вот видео
Видео просмотрел и все получилось. Большое спасибо!
Но есть пара вопросов.
1. На последнем этапе вы слой Shape2 просто удалили? Несколько раз просмотрел этот момент - очень уж там незаметно было действие выполнено. По крайней мере, у меня получилось так, как у Вас, когда я удалил Shape2.
2. Я так и не понял, почему, когда я дублирую эти три слоя в новый документ, то слой с фоном там я могу свободно удалить. А вот когда пробую это делать в исходном документе, то он у меня удаляется, но флаг остается, причем еще какой! ))
3. А что за рамочка возникает вокруг курсора, когда Вы кликаете на шапке макета? Для чего она нужна и как ее включить, если она нужна?
http://savepic.net/3154623.htm
P.S.
Блин, уголки не закруглились: левый верхний и левый нижний (((. Не знаю как уголки скруглить
.Ну ведь это не беда? Картинка ложится фоном в шапку, поэтому скругление легко сделать с помощью border-radius?
Наполовину разобрался, что это за рамочка ("Показать управление трансформацией на выбранных слоях"):
И даже "потаскал" ее во все стороны на разных слоях.
Но вот для чего она - так и не понял. ))
-
dropbox или можно rghost.ru (без регистрации).
Выложил - http://rghost.ru/39519743
-
А вы можете макет выложить? Я попробую сделать. Если получится, то отпишусь.
Здесь есть какое-либо специальное место, куда их выкладывать? Или пользоваться типа Dropbox?
-
>Однако на самом слое нет отображения эффектов почему-то.
На самом деле есть. Видите надпись fx и стрелку вниз справа от названия слоя Shape14? Это и есть эффекты (нажать на стрелку, они отобразятся под слоем).
Обводку в хтмл делать {border: 10px solid #fff;} где 10px — толщина обводки. padding не нужен.
Большое спасибо за ценные для меня подсказки. Да, действительно, щелкнул по стрелке и эффекты отобразились.
По поводу обводки хотел как раз спросить и уточнить. Сегодня пробовал выполнить обводку для вырезанной картинки.
Реально получается действительно только с помощью border:
border:2px solid #fff;
Пробовал с padding:
background:#fff;
padding:2px;Результат тот же.
Я это пишу к вопросу, который хочу задать. Если к вырезанной картинке с размерами 50х50px добавить рамку 2px, то ее реальные размеры на шаблоне будут больше, чем на макете - 54x54px. Тоже относится и к padding. Ведь так?
Насколько я понял, в CSS невозможно выполнить обводку так, как это сделано в Photoshop - чтобы она накладывалась на изображение поверх него, не изменяя при этом конечные размеры самого изображения?
Я правильно понимаю?
P.S.
Обводку в хтмл делать {border: 10px solid #fff;} где 10px — толщина обводки. padding не нужен.Толщину Вы указали наверное только в качестве примера? У меня в свойствах стоит 2px:
Подскажите еще, пожалуйста на один вопрос.
Имеется шапка на psd-макете. Фрагмент ее привожу ниже:
http://savepic.org/2408125.png
Вот картина на Панели слоев. Рамкой обвел слои, отвечающие за прорисовку этого фрагмента:
http://savepic.net/3185499.htm
У меня не получается вырезать логотип шапки. Мне необходимо получить в результате шапку такого вида:
один файл с прозрачным фоном, на котором значок флага + Formula
В готовом html-шаблоне находится именно такой файл с расширением png.
Пробовал вырезать, манипулируя объединением или отменой связей между слоями. Самое лучшее, что получал в результате - файл со "значок флага + Formula" и фоновой заливкой красного цвета. Или значок флага с фоном, но без "Formula".
Помогите разобраться.
P.S.S.
Конечно, наивно и глуповато звучит, но я просто в восторге от подсказки по поводу раскрытия и скрытия эффектов слоя. Раньше просто выискивал их на самом макете - на боксах, шрифтах и т. п. Можно только представить! ))))) Еще учиться и учиться...
-
Если убрать "Эффект - Выполнить обводку", то это уберет рамки.
Layer17 лежит сверху Shape 14 copy 2 и точно входит в границы фигуры, нарисованной на слое Shape14copy2.
Действия:
1. Убрать "Эффекты" (кликнуть по иконке глаза).
2. Воспользоваться Crop'ом.
Большое спасибо за подсказку. Все получилось.
Начал разбираться дальше и столкнулся еще с одной небольшой проблемой.
Есть еще одна картинка:
И слои, отвечающие за нее:
http://savepic.org/2369170.png
Однако на самом слое нет отображения эффектов почему-то. Догадался открыть свойства слоя и найти в нем эффект "Обводка".
http://savepic.net/3169266.htm
В нем отключил эффект "Обводка" и получилось тоже самое, что и в предыдущем случае, как подсказали вы. Затем вырезал изображение Crop'ом.
Думаю, я сделал все правильно?
В CSS мне теперь нужно дорисовать обводку с помощью border и padding, я правильно понимаю?
-
Подскажите, пожалуйста.
Имеется макет в psd, фрагмент которого привожу ниже. Точнее - это кусок макета с проблемным для меня местом.
Стоит задача вырезать фотографию, причем без рамки (ее доделаю в CSS).
В панели слоев Photoshop такая "картина":
http://savepic.org/2402954.png
Рамкой обвел те слои, которые рисуют это изображение. Но, насколько я понимаю, один слой связан с другим. И отделить один от другого, чтобы вырезать картинку, у меня не получается.
Подскажите, как правильно это сделать?
P.S.
Когда писал, пришла мысль - может воспользоваться Crop?
Все равно подскажите, как нужно выполнить эту операцию? До этого с такими замысловатыми слоями не сталкивался - все изображения были каждый на отдельном слое. Просто объединял нужные и выделением копировал в новый документ, где отключал фон а потом сохранял "Как web..."
Вот так - Вырезание объекта из макета
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>index</title>
<style type="text/css">
body {
background-color:gray;
}
</style>
</head>
<body>
<div id="warp">
<div id="head"></div>
</div>
</body>
</html>Body залился серым цветом. У тебя еще стили подключены - может там что есть?
-
inline - это строковый элемент, inline-block - строчно-блочный элемент.
Имхо, лучше думать о нем как о внутристрочном блоке или блоке, встраиваемом (встроенном) в строку. Как картинка или кнопка.
Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка.
В первом случае тогда мне нет необходимости дописывать:
ul li a {
display:block
}
Я правильно понимаю?
Нет. Как раз в случае встроенных блоков дописывать это имеет смысл (если надо сделать кликабельной всю ширину пункта меню). А при inline это, как правило, бессмысленно — блок, насильно впихнутый посреди строки обычного текста, попросту разорвет ее.
Наглядный пример разницы: http://jsfiddle.net/4NrXF/
Спасибо за простое и доступное объяснение.
-
Меня поражает тот факт, что когда учил CSS - да, было тяжеловато сначала, но потом освоил. Перечитал горы литературы (Мержевич - всю его литературу, Тиге, половину Рейчел и Мейера и еще других авторов), пересмотрел видеокурсы ("Специалист", Попов), накопал в Инете видеоуроки по верстке (хотя их и мало как таковых). Считал, что теоретически создал для себя более чем хорошую основу.
А вот попробовал самостоятельно свертать (пускай и по готовому примеру) что-то - и все! Как будто ничего и не учил, ничего и не знаю вообще. Вроде смотришь на макет - ага, здесь все просто, там так сделать, тут так.
А начинаешь делать - то одно не получается, то другое не знаешь как правильно или вообще не знаешь как сделать.
Firebug еще только хорошо помогает изучить готовый шаблон, разобраться, что к чему.
(((
-
inline - это строковый элемент, inline-block - строчно-блочный элемент. Азы я знаю. Может даже больше, чем нужно на начальном этапе (как мне кажется).
А вот с практикой у меня дела обстоят гораздо хуже.
Пытаюсь верстать по готовому примеру. И в чужом коде увидел, что горизонтальное меню делается таким образом:
display:inline-block
Во всех учебниках и у Мержевича горизонтальное меню создается через:
display:inline
При display:inline-block элемент ведет себя, как встроенный, но его внутренняя часть форматируется так, как будто это блочный элемент. Это позволяет, например, добавить вертикальные паддинги.
Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка.В первом случае тогда мне нет необходимости дописывать:
ul li a {
display:block
}
Я правильно понимаю?
Наверное, все-таки лучше действительно начать с азов, чтобы понимать, что происходит, а не заучивать "если у родителя inline, значит - у потомка display:block" (что, кстати, никак друг от друга не зависит, а только от ситуации). И вообще, не понятно откуда такой вывод сделан
Мда... Значит, действительно еще не все знаю... Печально... (((
-
Пожалуй вам стоит начать с самых азов.
inline - это строковый элемент, inline-block - строчно-блочный элемент. Азы я знаю. Может даже больше, чем нужно на начальном этапе (как мне кажется).
А вот с практикой у меня дела обстоят гораздо хуже.
Пытаюсь верстать по готовому примеру. И в чужом коде увидел, что горизонтальное меню делается таким образом:
display:inline-block
Во всех учебниках и у Мержевича горизонтальное меню создается через:
display:inline
Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка.
В первом случае тогда мне нет необходимости дописывать:
ul li a {
display:block
}
Я правильно понимаю?
-
Подскажите новичку.
Стоит задача создать горизонтальное меню.
Имеются такие строки:
ul li {
...
display:inline;
...
}
А чем отличается вышеприведенная строка от следующей:
ul li {
...
display:inline-block;
...
}
-
Недавно возник вопрос. Под Ubuntu есть хорошие редакторы для написания кода (Bluefish, Geany).
А вот Gimp - имеются ли у него те же возможности, что и у Photoshop для нарезки графики и вообще при работе в макетом сайта?
Недавно надо было сверстать макет psd, открывал в Gimp и потом в Photoshop, разница колоссальная!
Но можно попробовать установить Photoshop в wine, например, http://san-i.org.ua/linux/adobe-photoshop-cs6-ubuntu-linux-wine/
А также можно поставить в виртуальную машину, если вам удобнее работать в linux. (ИМХО, быстрее винды работает)
Да, под Wine знаю, что можно установить. Но пока поработаю под Windows.
-
Подскажите, как в Photoshop на макете узнать радиус скругления какого-либо бокса?
Сейчас делаю это так, что тупо масштабирую макет и считаю пиксели, которые входят в закругление бокса.
-
2b2e28 - RBG в шестнадцатиричном формате
rgba(43,46,40,0.45) - тот же RGB, но в десятичном формате + альфа канал (0.45 - уровень непрозрачности)
Старые браузеры заливают фон цветом #2b2e28, а новые - таким же цветом, но фон становится прозрачным. Десятичные значения для rgb можно посмотреть в фотошопе напротив соответствующего цветового канала.
В html-коде эти строки никак друг на друга не накладываются, конечно. Да, теперь мне понятно, почему у меня не получалось установить для блока фон, такой же, как на psd-макете. Первоначально у меня стояла только первая строка и получалась какая-то ерунда.
"... Десятичные значения для rgb можно посмотреть в фотошопе напротив соответствующего цветового канала."
Альфа-канал можно увидеть там же? Смотрел и что-то не увидел его. Может, плохо смотрел?
-
Подскажите, плиз.
Такие строки:
.content {
...
background-color: #2b2e28;
background-color: rgba(43,46,40,0.45);
...
}
Если с первой строкой все ясно и понятно, то откуда берется вторая строка из Photoshop?
Спидбар - что это такое?
in HTML Coding
Posted
спасибо за подсказку. на данный момент серьезно изучал только joomla и там speedbar упоминался как breadcrums.