È possibile ottenere un effetto di testo tagliato come questo usando solo CSS/CSS3? o l'immagine è l'unica opzione per ottenere questo effetto.È possibile ottenere un effetto di testo tagliato come questo usando solo CSS/CSS3?
Questo dovrebbe funzionare:
Ecco un piccolo trucco che ho scoperto utilizzando i :before e :after pseudo-elementi:
+1 Davvero bello e nitido –
È possibile utilizzare lo stile del testo-ombra per impostare un'ombra per l'angolo in alto a sinistra. Sarà vicino a quello che stai cercando, ma per quanto ne so non c'è modo di fare esattamente quello che stai cercando in CSS/CSS3
text-shadow è tuo amico. See this page per molti esempi di ciò che è possibile ottenere con esso. L'esempio n. 8 sembra promettente.
+1 Grazie per il link –
Questo mi tornerà utile anche per me un giorno! Grazie! +1 – jolt
Un ottimo collegamento: grazie per la condivisione. –
Quello che si ha realmente bisogno per quel particolare effetto è inset:
text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */
Unfortunately: "<ombra> è lo stesso definito per il 'box-shadow', tranne che la parola 'inserto' non è permesso."
Una soluzione di livello molto basso per questa follia signore è di ottenere JavaScript (o HTML semantico) per rendere un testo trasparente al centro del testo (che sarà difficile) e quindi applicare l'ombra su quel testo;) che creerà ombre pseudo-realistiche per inserti^_^ – ShrekOverflow
Sì, è possibile ottenere questo effetto con CSS e testo, ma è un po 'folle. Fondamentalmente si crea un grappolo di gradienti radiali e lineari css3 grigio-zero con zero opacità e con attenzione posizionarli sul testo. Ma faresti meglio a farlo in Photoshop.
Un slightly softer way di utilizzare i pseudo-elementi Web_Designer menzionati:
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:after {
text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
content: attr(title);
padding: 50px;
color: transparent;
position: absolute;
top: 1px;
left: 1px;
}
È un po 'più semplice - ottenere il bordo morbido di e depressione usi l'ombreggiatura del testo del: dopo lo pseudo e rendilo trasparente, piuttosto che usare due pseudos. A mio parere, sembra anche molto più pulito - può funzionare a dimensioni molto più grandi. Non ho idea di quanto sia veloce, anche se probabilmente userete l'ombra del testo con parsimonia comunque.
ho trovato questo http://jsfiddle.net/NeqCC/
Supporta sfondo bianco e testo scuro
Tutto il merito va al creatore
HTML
<!--
CSS3 inset text-shadow trick
Written down by Jyri Tuulos
http://about.me/jyrituulos
Effect originally found at http://timharford.com/
All credits for originality go to Finalised Design (http://finalisedesign.com/)
Note that this trick only works for darker text on solid light background.
-->
<h1 class="inset-text">Inset text-shadow trick</h1>
CSS
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10,60,150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
Non si vota per chiudersi come duplicato, perché non so da quanto assomigli a quello che si vuole (e non c'è una risposta precisa neanche lì) ma questa è una domanda piuttosto simile: http://stackoverflow.com/questions/ 2889501/inner-text-shadow-with-css –
@David - Sì, entrambe le domande sono simili, dovrei chiudere la mia domanda. o posso unire la mia domanda con la domanda che hai collegato –
beh, se dici che sono simili, voterò per la chiusura, e se le persone sono d'accordo, questo sarà tutto a posto. non c'è bisogno che tu agisca. –