Chcę stworzyć przyzwoite dane wejściowe dla mojego formularza i naprawdę chciałbym wiedzieć, jak TWITTER robi świecące obramowanie wokół danych wejściowych.
Przykład / zdjęcie obramowania Twittera:
Nie bardzo wiem też, jak stworzyć zaokrąglone rogi.
Odpowiedzi:
Proszę bardzo:
Demo na żywo: http://jsfiddle.net/simevidas/CXUpm/1/show/
(aby wyświetlić kod demo, usuń „show /” z adresu URL)
źródło
transition: box-shadow linear 1s
jsfiddle.net/simevidas/6LyWe/1.glowing-input { … }
.Co powiesz na coś takiego ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/
CSS
źródło
Użyj normalnego niebieskiego
border
, średniegoborder-radius
i niebieskiegobox-shadow
z pozycją0 0
.źródło
SLaki trafiły w sedno, ale możesz ogólnie przyjrzeć się zmianom dla danych wejściowych w CSS3. Zaokrąglone rogi i cień w polu to nowe funkcje w CSS3 i pozwolą Ci zrobić dokładnie to, czego szukasz. Jednym z moich ulubionych linków do CSS3 / HTML5 jest http://diveintohtml5.ep.io/ .
źródło
Połączyłem dwie z poprzednich odpowiedzi ( jsfiddle ).
źródło
Zmodyfikowana wersja z nieco mniej świecącą wersją.
źródło
źródło
Poniżej znajduje się kod używany przez Bootstrap. Kolory są nieco inne, ale koncepcja jest taka sama. To jest jeśli używasz LESS do kompilacji CSS:
Jeśli nie używasz LESS, oto skompilowana wersja:
źródło
Spowoduje to utworzenie świecących pól wejściowych i obszarów tekstowych:
źródło
źródło
Lepiej użyj Twitter Bootstrap, który zawiera wszystkie te fajne rzeczy w środku. Szczególnie tutaj jest dokładnie to, czego chcesz.
Ponadto możesz używać różnych motywów stworzonych dla Twitter Bootstrap z tej witryny
źródło