Эффект CSS3 Text Field с использованием box-shadow (вставка)?

Я хочу получить эффект текстового поля с помощью CSS3 следующим образом:

enter image description here

I tried to do that using CSS3 but yet not succeeded to get exactly the same look, please find my code here in jsfiddle.net

<Сильный> CSS

.field {
-webkit-box-shadow: inset 0px 1px 4px 1px #929292;
-moz-box-shadow: inset 0px 1px 4px 1px #929292;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
width: 277px;
height: 18px;
border-top: #9f9e9e 1px solid;
border-right: #c9c9c9 1px solid;
border-bottom: #ececec 1px solid;
border-left: #c9c9c9 1px solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
outline: none;
padding: 6px 8px;
font-size: 13px;
line-height: 16px;
color: #333;
}

<Сильный> HTML

<input type="text" name="name" value="" class="field">

Заранее спасибо.

0
nl ja de

1 ответы

Трудно определить «точно такой же взгляд». В любом случае, это моя попытка:

обновленная демонстрация

Я изменил тень теней и дал ему вторую тень

box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3), 
            inset 0px -1px 1px 1px rgba(0, 0, 0, 0.2);

Ключевая проблема здесь заключается в том, что вы можете установить столько теней, сколько хотите, даже одного и того же типа (я имею в виду, что оба являются «вставками»). Таким образом, вы можете получить почти все, что захотите. Более того, если вы используете альфу в цветах.

Кстати, я думаю, вы можете сбросить -webkit-border-radius.

1
добавлено
Спасибо, что попробовали ... но все равно нужно посмотреть на него ...
добавлено автор Subhajit, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)