Utwórz kartę na Twitter dla użytkowników korzystających z HTML5 i CSS3

Profil użytkownika jest jedną z najważniejszych części w aplikacji, z której ma on dostęp do swoich danych osobowych, opcji konfiguracyjnych i wszystkich funkcji związanych z jego profilem.
Profile użytkowników prawie zawsze są zgodne ze standardem w aplikacjach webowych, ale czasami możemy zaimplementować coś innego i zależy to również od modelu biznesowego naszej strony, na przykład jeśli zarządzamy jakąkolwiek społecznością, nie zaszkodzi wdrożenie karta w stylu Świergot dla użytkowników naszej społeczności.
Budowanie HTML
Aby stworzyć naszą kartę użytkownika w stylu Twittera, użyjemy HTML5 Tak CSS3, więc będziemy mieć tylko dwa pliki; nasz .html i nasz arkusz stylów. Dołączamy nasz arkusz stylów i zaczynamy tworzyć naszą zagnieżdżoną strukturę div, która następnie z kilkoma stylami w CSS sprawimy, że będą wyglądać tak, jak sobie życzymy.

Dave Grohl @DaveGrohlTweety 3,500Następny 140Obserwujący 2,700

Kiedy już to mamy, musimy tylko stworzyć nasz arkusz stylów.
Tworzenie CSS
Dla niego CSS użyjemy niektórych właściwości gradientu, cieni i konwencjonalnych właściwości dla litery i położenia elementów:

 ciało {tło: # F0EFED; background-image: -webkit-linear-gradient (góra, # E5E4E5, # C2C1C2); obraz w tle: gradient liniowy (do dołu, # E5E4E5, # C2C1C2); rodzina czcionek: 'ProximaNova-Regular', Helvetica neue, bezszeryfowa; } .container {max-szerokość: 350px; szerokość: 100%; wzrost: 100%; pozycja: względna; margines: auto; }

Oprócz tego musimy dodać style dla karty jako takiej, zobaczmy kilka stylów dla niej:

 .card-profile_visual: przed, .card-profile_visual: after {display: block; treść: ''; szerokość: 100%; wzrost: 100%; pozycja: bezwzględna; indeks z: 0; tło: url (profil.jpg.webp) środek bez powtórzeń środek / okładka; krycie: 0,5; tryb mieszania: rozjaśnij; } .card-profile_visual: przed {-webkit-filter: skala szarości (100%); filtr: skala szarości (100%); } .card-profile_user-infos {pozycja: bezwzględna; indeks z: 3; po lewej: 0; prawo: 0; margines: auto; góra: calc (68% - 100px); kolor: #fff; wyrównanie tekstu: środek; } .card-profile_user-infos a {szerokość: 64px; wysokość: 64px; pozycja: bezwzględna; po lewej: 0; prawo: 0; margines: auto; kolor tła: # F96B4C; obraz w tle: -webkit-linear-gradient (# F96B4C, # F23182); obraz tła: gradient liniowy (# F96B4C, # F23182); Blok wyświetlacza; oba czyste; margines: auto; promień graniczny: 100%; góra: calc (500% + 66px); box-shadow: 0 2px 0 # D42D78, 0 3px 10px rgba (243, 49, 128, 0.15), 0 0px 10px rgba (243, 49, 128, 0.15), 0 0px 4px rgba (0, 0, 0, 0.35 ), 0 5px 20px rgba (243, 49, 128, 0,25), 0 15px 40px rgba (243, 49, 128, 0,75), wstawka 0 0 15px rgba (255, 255, 255, 0,05); przelew: ukryty; }

Jeśli zauważymy w klasie .profil-karty_wizualny W tym miejscu dodajemy obraz do profilu, dlatego musimy dodać obraz naszych preferencji, aby dostosować kod do naszych potrzeb. Zobaczmy, jak wygląda nasz przykład, gdy uruchomimy go w przeglądarce.

Na końcu samouczka znajdą się pliki, które każdy może przetestować i dostosować na wybranej przez siebie witrynie internetowej, więc nie wahaj się go wypróbować, a nawet rozszerzyć jego funkcjonalność w porównaniu z tym, co widać w tym samouczku.
karta profilu twitter.zip 393.53K 251 pobrańPodobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt