Blinkende Taste. Flackern während der CSS-Transformation in Safari beseitigen. Einfache Änderung des Farbtons
Bevor wir uns die Schaltflächen ansehen, schauen wir uns die gemeinsamen Einstellungen an.
HTMLDie Schaltflächen verwenden einen sehr einfachen HTML-Code:
Jetzt abonnieren
CSSAuch alle Tasten werden vorhanden sein Allgemeine Einstellungen für Beschriftungstext und Deaktivierung von Links:
ButtonText ( Schriftart: 18px/1.5 Helvetica, Arial, serifenlos; Farbe: #fff; ) a ( Farbe: #fff; Textdekoration: keine; )
Normalerweise erwartet der Benutzer einen eher sanften Effekt, wenn er mit der Maus über einen Link oder eine Schaltfläche fährt. Und in unserem Fall ändert sich die Größe der Schaltfläche – sie vergrößert sich und zeigt eine zusätzliche Meldung an.
Grundlegender CSS-CodeZunächst müssen wir dem Knopf nur eine Form und Farbe geben. Definieren Sie eine Höhe von 28 Pixel und eine Breite von 115 Pixel, fügen Sie Ränder und Abstände hinzu und geben Sie der Schaltfläche außerdem einen hellen Rand.
#button1 (Hintergrund: #6292c2; Rand: 2px solide #eee; Höhe: 28px; Breite: 115px; Rand: 50px 0 0 50px; Polsterung: 0 0 0 7px; Überlauf: versteckt; Anzeige: Block; )
CSS3-EffekteManche Leute mögen es, wenn eine einfache Schaltfläche von ziemlich viel CSS-Code begleitet wird. In diesem Abschnitt finden Sie zusätzliche CSS3-Stile für unsere Schaltfläche. Auf sie kann man zwar verzichten, sie verleihen dem Knopf aber ein moderneres Aussehen.
Runden Sie die Ecken des Rahmens ab und fügen Sie einen Farbverlauf hinzu. Dies nutzt einen kleinen Trick mit einem dunklen Farbverlauf, der mit jeder Hintergrundfarbe interagiert.
/*Abgerundete Ecken*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; Randradius: 15px; /*Gradient*/ Hintergrundbild: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS-AnimationLassen Sie uns nun den CSS-Übergang einrichten. Die Animation wird für alle Eigenschaftsänderungen verwendet und dauert eine halbe Sekunde.
Maus drüberJetzt müssen Sie nur noch einen Stil hinzufügen, um die Schaltfläche zu erweitern, wenn Sie mit der Maus darüber fahren. Die Schaltfläche muss 230 Pixel breit sein, um die gesamte Nachricht anzuzeigen.
#button1:hover (Breite: 230px;)
Einfache Änderung des Farbtons
Sehr einfach und beliebt CSS-Effekt für den Knopf. Wenn Sie den Mauszeiger bewegen, ändert sich der Farbton der Hintergrundfarbe sanft.
Grundlegender CSS-CodeDer CSS-Code ist dem vorherigen Beispiel sehr ähnlich. Es wird eine andere Hintergrundfarbe verwendet und die Form wird leicht verändert. Außerdem wird der Text zentriert und die Zeilenhöhe für die Schaltfläche so festgelegt, dass eine vertikale Zentrierung erfolgt.
#button2 (Hintergrund: #d11717; Rand: 2 Pixel fest #eee; Höhe: 38 Pixel; Breite: 125 Pixel; Rand: 50 Pixel 0 0 50 Pixel; Überlauf: versteckt; Anzeige: Block; Textausrichtung: Mitte; Zeilenhöhe: 38 Pixel; )
CSS3-EffekteStellen Sie die Abrundung der Ecken, einen Farbverlauf für den Hintergrund und einen zusätzlichen Schatten ein. Mit RGBA machen wir den Schatten schwarz und transparent.
/*Abgerundete Ecken*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; Randradius: 10px; /*Gradient*/ Hintergrundbild: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); Box-Shadow: 0px 3px 1px rgba(0, 0, 0, 0,2);
CSS-AnimationDie Animation unterscheidet sich praktisch nicht vom vorherigen Beispiel.
/*Transition*/ -webkit-transition: Alle 0,5 Sekunden einfach; -moz-transition: Alle 0,5 Sekunden erleichtern; -o-transition: Alle 0,5 Sekunden erleichtern; -ms-transition: Alle 0,5 Sekunden erleichtern; Übergang: Alle 0,5 Sekunden nachlassen;
Maus drüberBeim Bewegen des Mauszeigers wird eine andere Hintergrundfarbe eingestellt. Versuchen Sie, in Photoshop eine hellere Farboption zu wählen, um einen tollen Effekt zu erzielen.
#button2:hover (Hintergrundfarbe: #ff3434;)
Dieser Effekt kann je nach Wahl des Hintergrundbildes durchaus beeindruckend sein. Die Demo verwendet einen unscheinbaren Hintergrund und der Effekt sieht unscheinbar aus. Versuchen Sie es mit einem anderen Bild, der Effekt kann atemberaubend sein.
Grundlegender CSS-CodeDer Hauptteil des Codes ist derselbe wie in den vorherigen Beispielen. Bitte beachten Sie, dass wir ein Hintergrundbild verwenden. Die anfängliche Hintergrundposition ist auf „0 0“ eingestellt. Wenn Sie den Cursor bewegen, verschiebt sich die Position vertikal.
#button3 (Hintergrund: #d11717 url("bkg-1.jpg"); Hintergrundposition: 0 0; Textschatten: 0px 2px 0px rgba(0, 0, 0, 0.3); Schriftgröße: 22px; Höhe : 58px; Breite: 155px; Rand: 50px 0 0 50px; Überlauf: versteckt; Anzeige: Block; Textausrichtung: Mitte; Zeilenhöhe: 58px; )
CSS3-EffekteIn diesem Beispiel gibt es nichts Besonderes – abgerundete Ecken und Schatten.
/*Abgerundete Ecken*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; Randradius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); Box-Shadow: 0px 3px 1px rgba(0, 0, 0, 0,2);
CSS-AnimationDie Animation dauert in diesem Fall länger, um einen flüssigen und interessanten Effekt zu erzielen.
/*Transition*/ -webkit-transition: Alle 0,8 Sekunden leicht; -moz-transition: Alle 0,8 Sekunden erleichtern; -o-transition: Alle 0,8 Sekunden erleichtern; -ms-transition: Alle 0,8 Sekunden erleichtern; Übergang: Alle 0,8 Sekunden locker;
Maus drüberJetzt ist es an der Zeit, das Hintergrundbild zu verschieben. Die Ausgangsposition war „0 0“. Stellen Sie den zweiten Parameter auf 150 Pixel ein. Um horizontal zu verschieben, müssen Sie den ersten Parameter ändern.
#button3:hover (Hintergrundposition: 0px 150px;)
3D-Tastendrucksimulation
Das letzte Beispiel in unserer Lektion handelt von der beliebten 3D-Methode zur Simulation eines Tastendrucks, wenn der Mauszeiger darüber bewegt wird. Die Animation für diesen Fall ist so einfach, dass nicht einmal ein CSS-Übergang erforderlich ist. Aber das Endergebnis kann sich durchaus sehen lassen.
Grundlegender CSS-CodeCSS-Code für unseren Button.
#button4 (Hintergrund: #5c5c5c; Textschatten: 0px 2px 0px rgba(0, 0, 0, 0.3); Schriftgröße: 22px; Höhe: 58px; Breite: 155px; Rand: 50px 0 0 50px; Überlauf: versteckt ; Anzeige: Block; Textausrichtung: Mitte; Zeilenhöhe: 58 Pixel; )
CSS3-EffekteIn diesem Fall ist CSS3 keine gute Option mehr. Um den Effekt zu erzielen, sind Schatten und ein Farbverlauf erforderlich. Ein scharfer Schatten erzeugt das Aussehen einer 3D-Schaltfläche.
/*Abgerundete Ecken*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; Randradius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); Box-Shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); /*Gradient*/ Hintergrundbild: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); Hintergrundbild: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Maus drüberIn diesem Fall haben wir den größten Hover-Bereich. Die Länge des Schattens wird reduziert und die Ränder werden verwendet, um eine Überblendung des dunklen Bereichs zu erzeugen. Alles in allem entsteht die Illusion, einen Knopf zu drücken. Das Umdrehen des Farbverlaufs verstärkt den Effekt.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0,8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0,8); /*Gradient*/ Hintergrundbild: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); Hintergrundbild: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); Hintergrundbild: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); Hintergrundbild: -ms-linear-gradient( unten, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); Hintergrundbild: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )
CSS ist ohne Zweifel eine der wichtigsten Auszeichnungssprachen, die wir verwenden. Und obwohl HTML die Struktur eines Dokuments beschreibt, kann sein Verhalten je nach Browserversion unvorhersehbar sein. CSS ist das Tool, mit dem wir alle Inkonsistenzen in der Anzeige der Seite korrigieren und ihr Erscheinungsbild gestalten können.
Text mithilfe eines Absatzes ausblendenDiese Technik wird für ein Firmenlogo sehr nützlich sein. Am häufigsten wird ein Bild als Logo verwendet, aber für SEO wäre es schön, den Firmennamen in h1-Tags anzuzeigen. Dieses Beispiel- am meisten Der beste Weg dies umsetzen. Tatsächlich verstecken wir den Text einfach außerhalb des Bildschirms und weisen ihn stattdessen zu Hintergrundbild.
H1 ( text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; )
Styling-Links je nach DateiformatDieses Beispiel zielt auf eine Verbesserung ab Benutzeroberfläche. Im Internet folgen wir oft Links, ohne zu wissen, wohin sie führen. Der folgende Codeausschnitt wird verwendet, um kleine Symbole neben Links anzuzeigen. Solche Bilder weisen den Benutzer darauf hin, dass es sich um einen externen Link handelt. E-Mail, PDF-Datei, Bild usw.
/* externer Link */ a( padding-right: 20px; Hintergrund: url(external.gif) no-repeat center right; ) /* email */ a( padding-right: 20px; Hintergrund: url(email.png) no-repeat Mitte rechts; ) /* pdfs */ a( padding-right: 20px; Hintergrund: url(pdf.png) no-repeat Mitte rechts; )
Entfernen von Bildlaufleisten aus einem mehrzeiligen Feld im IEInternet Explorer hat die lästige Angewohnheit, einem mehrzeiligen Feld Bildlaufleisten hinzuzufügen, selbst wenn sein Inhalt innerhalb der angegebenen Größe liegt. Dieser Fehler lässt sich leicht mit der folgenden Codezeile beheben:
Textbereich( overflow:auto; )
AnfangsbuchstabeHeutzutage ist es ein sehr häufiges Phänomen in Blogs und Nachrichtenseiten. Sie werden überrascht sein, wie einfach es zu implementieren ist und wie schnell es in älteren Browsern funktioniert.
P:first-letter( display:block; margin:5px 0 0 5px; float:left; color:#FF3366; Schriftgröße:60px; Schriftfamilie:Georgia; )
CSS-TransparenzTransparenz ist eine Eigenschaft, die verschiedenen Browsern unterschiedlich zugewiesen wird. Mit dem folgenden Codeausschnitt können Sie allen Browsern gleichzeitig Transparenz zuweisen.
Transparent ( filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; )
CSS-Reset von Eric MeyerTatsächlich hat sich der von Eric Meyer vorgeschlagene CSS-Reset bereits zu einem weit verbreiteten Anwendungsstandard entwickelt. Da es von vielen namhaften Entwicklern adaptiert wurde, können Sie sich auf seine Qualität verlassen.
HTML, Körper, Div, Span, Applet, Objekt, Iframe, H1, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, Abbr, Akronym, Adresse, Big, Cite, Code, Del, DFN, em, Schriftart, img, ins, kbd, q, s, samp, klein, Strike, stark, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thehead, tr, th, td ( margin: 0; padding: 0; border: 0; Outline: 0; Schriftgröße: 100 %; vertikale Ausrichtung : baseline; Hintergrund: transparent; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q :after ( content: ""; content: none; ) /* Denken Sie daran, Fokusstile zu definieren! */ :focus ( outline: 0; ) /* Denken Sie daran, Einfügungen irgendwie hervorzuheben! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* Tabellen benötigen weiterhin „cellspacing="0"" im Markup */ table ( border-collapse: Collapse; border-spacing : 0; )
Bild-PreloaderManchmal ist es sinnvoll, Ihre Bilder vorab zu laden, um Verzögerungen und Flackern beim Zugriff auf das gewünschte Element zu vermeiden.
Div.loader( Hintergrund: URL (Bilder/hover.gif) keine Wiederholung; Hintergrund: URL (Bilder/hover2.gif) keine Wiederholung; Hintergrund: URL (Bilder/hover3.gif) keine Wiederholung; Rand links: -10000px; )
Einfaches CSS-Sprite für eine SchaltflächeVerfügbarkeit einer Schaltfläche oder eines Links mit Hintergrundbild- eine häufige Sache, außerdem werden solche Elemente häufig verwendet zusätzliche Effekte, Verbesserung der Benutzeroberfläche. Einer dieser Effekte ist die Anzeige der Maus über der Schaltfläche. Mithilfe eines Sprites können wir diesen Effekt implementieren, indem wir die Eigenschaft „background-position“ auf einen bestimmten Wert ändern, sodass ein Hintergrundbild angezeigt wird, wenn die Maus über die Schaltfläche fährt. Eine einfache, aber effektive Lösung.
A ( display: block; Hintergrund: url(sprite.png) no-repeat; height: 30px; width: 250px; ) a:hover (background-position: 0 -30px; )
Google Font-APIVor nicht allzu langer Zeit hat Google eine wunderbare Ressource für Webentwickler implementiert, die es ihnen ermöglicht, neue, nicht standardmäßige Schriftarten herunterzuladen und auf der Seite zu verwenden. Es stehen sogar verschiedene Schriftarten zum Download zur Verfügung: Fett, Kursiv usw. Obwohl die Sammlung von Google noch begrenzt ist, steht eine recht große Anzahl an Schriftarten zur Verfügung. Fügen Sie zunächst eine dynamisch generierte CSS-Datei mit den Namen der benötigten Schriftarten und Variationen ein und verwenden Sie dann einfach wie gewohnt die Schriftartennamen im CSS. Weitere Informationen Sie können es mit der Google Font API lesen.
Inconsolata:italic|Droid+Sans"> body ( Schriftfamilie: „Tangerine“, „Inconsolata“, „Droid Sans“, Serif; Schriftgröße: 48px; )
Hacks für verschiedene BrowserManchmal ist es nützlich, einen Fehler in einem bestimmten Browser zu beheben, und bedingte Kommentare sind dies nicht immer die beste Lösung dafür. Diese Liste von Browser-Hacks von Chris Coyier hilft Ihnen dabei, mithilfe von einfachem CSS Eigenschaften bestimmten Browsern zuzuweisen.
/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass() /* IE 7 und moderne Browser */ html>body .yourclass ( ) /* Moderne Browser (nicht IE 7) */ html>/**/body .yourclass ( ) /* Opera 9.27 und niedriger */ html:first-child .yourclass ( ) /* Safari */ html body:last-child .yourclass ( ) /* Safari 3+ , Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1).yourclass ( ) /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first -of-type .yourclass ( ) /* Safari 3+, Chrome 1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) ( .yourclass ( ) )
Fester KellerMan könnte denken, dass es eine schwierige Aufgabe ist, eine Fußzeile zu erstellen, die immer am unteren Bildschirmrand klebt. Allerdings ist es überhaupt nicht schwierig, wenn Sie einen einfachen Keller wünschen. Wir müssen hier einen kleinen IE6-Hack verwenden, aber ansonsten ist es sehr einfach.
#footer ( position:fixed; left:0px; unten:0px; height:30px; width:100%; background:#999; ) /* IE 6 */ * html #footer ( position:absolute; top:expression(( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop)) +"px"); )
Drehen Sie ein BildDas Drehen eines Bildes kann sehr nützlich sein, insbesondere wenn es anstelle des Ladens eines neuen, vorgedrehten Bildes verwendet werden kann. Nehmen wir an, Sie möchten nur ein Bild für einen Pfeil verwenden, haben aber mehrere davon auf Ihrer Seite, die alle in unterschiedliche Richtungen zeigen. Hier ist die Lösung für Ihr Problem:
Img.flip ( -moz-transform: ScaleX(-1); -o-transform: ScaleX(-1); -webkit-transform: ScaleX(-1); transform: ScaleX(-1); Filter: FlipH; - ms-filter: „FlipH“; )
ClearfixVor nicht allzu langer Zeit beschloss jemand, dass es an der Zeit sei, den Fließkommastrom zu entfernen, ohne dem Dokument zusätzliches Markup hinzuzufügen. Als Ergebnis dieser Lösung wurde eine Klasse erstellt, die auf einen Container mit schwebenden Elementen angewendet werden kann, um diese zu löschen. Dies ist heute eine sehr praktische und weit verbreitete Methode.
Clearfix:after ( Sichtbarkeit: versteckt; Anzeige: Block; Schriftgröße: 0; Inhalt: " "; klar: beide; Höhe: 0; ) .clearfix ( Anzeige: inline-block; ) /* kommentierten Backslash-Hack starten */ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* kommentierten Backslash-Hack schließen */
Abgerundete EckenMit der schrittweisen Einführung von CSS3 in modernen Browsern entstehen abgerundete Ecken es wurde ganz einfach. Leider gibt es im IE noch keine Unterstützung für CSS3, einschließlich Version 8, aber es wird in IE9 hinzugefügt.
Round( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Zukunftssicherheit */ -khtml-border-radius: 10px; /* für alte Konqueror-Browser */ )
Überschreibende StileLeute, die nichts über !important in CSS wissen, verblüffen mich immer wieder, weil es ein so leistungsstarkes und einfach zu verwendendes Tool ist. Ganz einfach: Jede Regel mit !important am Ende überschreibt dieselbe Regel, die an einer beliebigen Stelle in der CSS-Datei oder in den Linienstilen auf dieses Element angewendet wird.
P( Schriftgröße:20px !important; )
SchriftartFont-Face war bis letztes Jahr nicht weit verbreitet, obwohl es es schon gibt, seit IE6 als moderner Browser galt. Diese Eigenschaft wird mittlerweile von modernen Browsern gut unterstützt und bietet eine hervorragende Möglichkeit, unsichere Schriftarten in Ihren Projekten zu verwenden. Um Zeit zu sparen, können Sie einen speziellen Font Squirrel Font Face-Generator verwenden.
@font-face ( Schriftfamilie: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url ("GraublauWeb.ttf") format("truetype"); )
Zentrieren der WebsiteEine gängige Designtechnik ist die horizontale Zentrierung der Site. Dies ist sehr einfach umzusetzen.
Min. Höhe im IEDieses Beispiel behebt einen einfachen, aber ärgerlichen Fehler im IE beim Festlegen einer Mindesthöhe. Im Allgemeinen interpretiert der IE die Höhe als Mindesthöhe. Wenn die Höhe im IE also nicht auf „Auto“ eingestellt ist, kann dieser Fehler mit dem folgenden Trick behoben werden.
Box ( min-height:500px; height:auto !important; height:500px; )
Ein Bild hochladenDieser Bildladeeffekt simuliert ein Ajax-Laden, indem ein Preloader angezeigt wird, bis der gesamte Inhalt geladen ist. Diese Lösung eignet sich perfekt für große, langsam ladende Bilder.
Img (Hintergrund: url(loader.gif) no−repeat 50% 50%; )
Vertikale ZentrierungMit diesem kleinen Codestück können Sie den Inhalt eines Containers vertikal zentrieren, ohne zusätzliches Markup zu verwenden. Sie müssen lediglich den Container als Tabellenzelle rendern und dann das Vertical-Align-Attribut auf einen Wert setzen.
Container (min-height: 10em; display: table-cell; Vertical-align: middle; )
Schnitte erstellenLassen Sie uns zunächst herausfinden, was ein Cut-In ist. Seitenleisten finden sich üblicherweise auf Nachrichtenquellen und Zeitschriftenseiten in Form eines kleinen Textblocks innerhalb eines Artikels. Manchmal enthalten sie die Meinungen oder Zitate von Personen. Sie werden froh sein zu erfahren, dass sie sehr einfach zuzubereiten sind und... richtige Verwendung, Einbettungen können das Benutzererlebnis eines Artikels erheblich verbessern.
Pullquote (Breite: 300 Pixel; Float: rechts; Rand: 5 Pixel; Schriftfamilie: Georgia, " Mal neu Roman", Times, Serif; Schriftart: kursiv fett #ff0000 ; )
TextauswahlNicht jeder weiß, dass es möglich ist, die Farbe des im Browser ausgewählten Textes zu ändern. Dies erfordert nur zwei Selektoren.
::selection ( Farbe: #000000; Hintergrundfarbe: #FF0000; ) ::-moz-selection ( Farbe: #000000; Hintergrund: #FF0000; )
Einen Seitenumbruch hinzufügenDieses Beispiel zielt wiederum darauf ab, die Benutzeroberfläche beim Drucken zu verbessern. Beim Drucken eines Artikels kann es beispielsweise sinnvoll sein, die Kommentare vom Text des Artikels zu trennen und auf eine separate Seite zu verschieben. Wenn Sie class.page-break zu einem Kommentarblock hinzufügen, werden alle Kommentare beim Drucken angezeigt separate Seite. Im Allgemeinen kann diese Klasse überall auf Ihrer Website verwendet werden.
Seitenumbruch( page-break-before:always; )
Guten Tag allerseits. Vor langer Zeit habe ich einen Beitrag als Blog veröffentlicht. Heute hatte ich Lust, mit der Gestaltung zu beginnen. Das native Gadget über den Autor selbst ist völlig langweilig und nicht attraktiv.
Dadurch war es möglich, einen individuellen Stil zu erstellen, der für Ihr eigenes Design sehr attraktiv und informativ ist, höchstwahrscheinlich nicht einmal ein Widget, sondern eine Profilkarte. So nennen wir es. Nun, so etwas in der Art
Arbeitsversion im Testblog in der Seitenleiste ganz unten
Was ist drauf?
1. Ihr Profilfoto.
2. Schönes Design die Karte selbst, die leicht anpassbar ist
3. Ihr Spitzname, Vor- oder Nachname
4 Sie können Ihren Beruf, Ihr Hobby angeben
5.Fügen Sie 2 Schaltflächen hinzu erforderliche Seiten. Dies können Links zu Ihrer vollständigen Autorenseite sein Startseite, Karte, Meisterkurse, öffentliche Seiten in sozialen Netzwerken. Irgendetwas.
6. Die Karte passt perfekt in die Seitenleiste des Blogs.
Kopieren Sie den Code unten und wir gestalten Ihre Profilkarte weiter.
![](https://ow5.ru/wp-content/uploads/2019/11/" alt=)
" alt="profile" class="profile" />!}
Vika Barad Bloggerin
meine blogGruppe auf VK
.snip1 (
Schriftfamilie: „Roboto“, Arial, serifenlos;
Farbe: #fff;
Position: relativ;
Überlauf versteckt;
Rand: 10px;
Mindestbreite: 230 Pixel;
maximale Breite: 315px;
Breite: 100 %;
Farbe: #ffffff;
Textausrichtung: links;
Zeilenhöhe: 1,4em;
Hintergrundfarbe: #141414;
}
.snip1 * (
-webkit-box-sizing: border-box;
Boxgröße: border-box;
-webkit-transition: alle 0,25 Sekunden erleichtern;
Übergang: alle 0,25 Sekunden nachlassen;
}
.snip1 img (
maximale Breite: 100 %;
vertikal ausrichten: oben;
Deckkraft: 0,85;
}
.snip1 figcaption (
Breite: 100 %;
Hintergrundfarbe: #141414;
Polsterung: 25px;
Position: relativ;
}
.snip1 figcaption:before (
Position: absolut;
Inhalt: "";
unten: 100 %;
links: 0;
Breite: 0;
Höhe: 0;
Randstil: solide;
Rahmenbreite: 55px 0 0 400px;
Randfarbe: transparent transparent transparent #141414;
}
.snip1 figcaption a (
Polsterung: 5px;
Rand: 1px fest #ffffff;
Farbe: #ffffff;
Schriftgröße: 0,7em;
Texttransformation: Großbuchstaben;
Rand: 10px 0;
Anzeige: Inline-Block;
Deckkraft: 0,65;
Breite: 47 %;
Textausrichtung: Mitte;
Schriftstärke: 600;
Buchstabenabstand: 1px;
Textdekoration: keine;
}
.snip1 figcaption a:hover (
Deckkraft: 1;
}
.snip1 .profile (
Randradius: 50 %;
Position: absolut;
unten: 100 %;
links: 25px;
Z-Index: 1;
maximale Breite: 90 Pixel;
Deckkraft: 1;
Box-Shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .follow (
Rand rechts: 6 %;
Rahmenfarbe: #2980b9;
Farbe: #2980b9;
}
.snip1 h2 (
Rand: 0 0 5px;
Schriftstärke: 300;
}
.snip1 h2 span (
Bildschirmsperre;
Schriftgröße: 0,5em;
Farbe: #2980b9;
}
.snip1 p (
Rand: 0 0 10px;
Schriftgröße: 0,8em;
Buchstabenabstand: 1px;
Deckkraft: 0,8;
}
.snip1:hover:before,
.snip1.hover:before (
unten: 0;
Box-Shadow: 0 0 0px weiß;
-webkit-transition-delay: 0s;
Übergangsverzögerung: 0s;
}
$(".hover").mouseleave(
Funktion()(
$(this).removeClass("hover");
}
);
https://w-dog.ru/wallpapers/10/19/380923269777589.jpg – das ist die Adresse des Bildes – Hintergrund oben
https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc – die Adresse Ihres Miniaturbilds. Sie können es in Ihr Google-Profil kopieren oder einen anderen Avatar festlegen.
Schreiben Sie in die rosa markierten Zeilen Ihren Spitznamen, Ihren Namen, Ihren Beruf und einen erklärenden Text.
Grün hervorgehoben sind dementsprechend die Adressen der Seiten, zu denen der Übergang erfolgt, wenn Sie auf die Schaltfläche klicken.
Ich habe auch den Haupthintergrund der Profilkarte an mehreren Stellen mit Farbe markiert #141414;
Die Einstellungen sind sehr einfach und ich glaube nicht, dass Fragen auftauchen werden. Wenn ja, schreiben Sie in die Kommentare. Lass es uns herausfinden.
Wir installieren den fertigen Widget-Code im Abschnitt DESIGN – HTML/JavaScript-Gadget in der Blog-Seitenleiste. Ich denke übrigens, dass es oben nicht schlecht aussehen wird, wenn der Benutzer die Möglichkeit hat, den Autor sofort kennenzulernen. Der Hintergrund und das Bild können ganz einfach je nach Stimmung oder Jahreszeit geändert werden. Es wird immer neu sein. Nun, es liegt an dir.
Alles Gute und viel Glück.
Dies ist nicht das erste Mal, dass mir auffällt, dass bei der Verwendung von CSS-Transformationen einige Elemente auf einer Seite in Safari auf mysteriöse Weise ihre Eigenschaften ändern. Bei anderen Browsern kommt das deutlich seltener vor.
Solche Artefakte fallen besonders auf, wenn die Transformation in der Pseudoklasse :hover erfolgt, d. h. sie werden ausgelöst, wenn die Maus über ein Element fährt. In meinem Fall führte die Vergrößerung der .btn-Schaltfläche, wenn ich mit der Maus darüber fuhr, dauerhaft zu einer Änderung der Art der Textglättung in benachbarten Blöcken.
Btn ( Transition: all .2s easy-in-out; ) .btn:hover ( transform: scale(1.1); )
Das Problem hängt mit einem Mangel an Rendering-Ressourcen zusammen und lässt sich recht einfach beheben.
Translate3DDer einfachste Weg, das Problem zu lösen, besteht darin, die Hardwarebeschleunigung zu aktivieren, die für 2D-Animationen in CSS standardmäßig deaktiviert ist. Dazu erstellen wir einfach eine leere 3D-Animation.
Webkit-Transformation: Translate3d(0,0,0);
Das ist es, aber es ist eine Krücke.
Wird sich verändernEs gibt eine relativ neue und noch wenig bekannte Eigenschaft in CSS, will-change, die den Browser vorab über eine mögliche bevorstehende Änderung eines Elements informiert. Wenn beispielsweise ein Element transformiert werden soll, können Sie den Browser darüber warnen, damit er Energie spart, wie es heißt. Im Fall der obigen Schaltfläche sieht das so aus:
Btn (Übergang: alle .2s easy-in-out; will-change: transform;)
Wenn Sie mehrere Parameter ändern möchten, können Sie diese nacheinander, durch Kommas getrennt, angeben. Zum Beispiel für eine Transformation mit wechselnder Transparenz:
Willensänderung: Transformation, Undurchsichtigkeit;
Auf diese Weise kann sich der Browser im Voraus auf schwere Verarbeitung vorbereiten und die Ressourcennutzung optimieren. Dadurch können Sie das Auftreten verschiedener Nebenwirkungen auf der Seite vermeiden.
Abonnieren Sie mein Telegramm und erhalten Sie als Erster neue Materialien, auch solche, die nicht auf der Website verfügbar sind.
