Trucco per copiare il design di QUALSIASI pagina in meno di 1 MINUTO

by

Ciao ragazzi

In questo tutorial vedremo come possiamo copiare il design di qualsiasi elemento di qualsiasi pagina Internet.

È molto semplice e può tirarci fuori più di una fretta.

Videotutorial

Iscriviti a un canale mi:  

Immaginiamo di voler copiare il layout del riquadro blu in questa pagina:

screenshot con riquadro blu

Per copiare gli stili di quella casella dobbiamo entrare in Chrome, posizionare il mouse su quella casella e fare clic con il tasto destro -> Ispeziona in modo che l'ispettore elementi si apra con la casella selezionata:

controllo elemento con la casella selezionata

Ora clicchiamo sul codice selezionato, tasto destro, copia, copia stili:

copia gli stili da Impostazioni elementi

Ora abbiamo incollato tutti gli stili dalla casella negli appunti.

Come utilizzare gli stili copiati?

Esistono molti modi per utilizzare questi stili, ma supponiamo che tu voglia usarli all'interno di WordPress.

Per fare ciò, dobbiamo creare una casella in html per poter applicare gli stili:

<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>

E ora andiamo su Aspetto -> CSS aggiuntivo e incolliamo gli stili all'interno della classe 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;
}

E se tutto è andato bene, il risultato è il seguente:

Lorem Ipsum è semplicemente testo fittizio di macchine da stampa e file di testo. Lorem Ipsum è stato il testo segnaposto standard del settore fin dal 1500, quando un tipografo sconosciuto prese una cassetta di caratteri e li mescolò per creare un campione da libro di testo. Non solo è sopravvissuto 500 anni, ma è anche entrato come testo di riempimento nei documenti elettronici, rimanendo sostanzialmente identico all'originale. È stato reso popolare negli anni '60 con la creazione di fogli Letraset contenenti passaggi di Lorem Ipsum e, più recentemente, con software di desktop publishing come Aldus PageMaker, che include versioni di Lorem Ipsum.

Spero che il trucco ti sia piaciuto, se vuoi più trucchi come questo e plugin e modelli gratuiti vai su PREMIUM

Lascia un commento