Cześć chłopaki,
W tym tutorialu zobaczymy jak możemy skopiować projekt dowolnego elementu dowolnej strony internetowej.
Jest to bardzo proste i może nas wyrwać z więcej niż jednego pośpiechu.
Instrukcja wideo
Suscríbete a mi kanał:
Wyobraźmy sobie, że chcemy skopiować układ niebieskiego pola na tej stronie:
Aby skopiować style tego pudełka, musimy wpisać chrome, najechać myszką na to pole i kliknąć prawy przycisk –> Sprawdź, aby inspektor elementów otworzył się z zaznaczonym polem:
Teraz klikamy wybrany kod, prawy przycisk, kopiuj, kopiuj style:
Teraz wszystkie style pudełka zostały wklejone do schowka.
Jak używać skopiowanych stylów?
Istnieje wiele sposobów wykorzystania tych stylów, ale załóżmy, że chcesz ich używać w WordPressie.
Aby to zrobić, musimy stworzyć pole w html, aby móc zastosować style:
<div class="caja">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</div>
A teraz przechodzimy do Wygląd -> Dodatkowe CSS i wklejamy style wewnątrz klasy box:
.caja{
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
--antd-wave-shadow-color: #1890ff;
--scroll-bar: 0;
--main-border: #edf5fd;
--secondery-border: #e2e2e2;
--primary-color: #07f;
--danger-color: #f44336;
--light-danger-color: #ffecec;
--active-text-color: #fff;
--header-color: #535461;
--block-color: #5a6982;
--outline-imput-bg: #f2f2f2;
--title-color: #354052;
font-feature-settings: "tnum";
border: 0;
font: inherit;
vertical-align: baseline;
margin: 30px 0;
padding: 20px;
background-image: linear-gradient(to right,#478bef,#44acf1);
box-shadow: 0 12px 20px #439bf33d;
border-radius: 22px;
color: #fff;
min-height: 245.5px;
text-align: center;
flex-flow: row wrap;
box-sizing: border-box;
display: flex;
place-content: center space-around;
align-items: center;
}
A jeśli wszystko poszło dobrze, wynik jest następujący: