Wir knüpfen dort an, wo wir in Video #034 aufgehört haben und bauen den Suchbereich weiter aus.
Dieses Mal konzentrieren wir uns auf den „offenen“ Zustand der Suche und bauen die eigentlichen Formularelemente. Das Suchfeld selbst verwendet den HTML5-Formularelementtyp „search“ – der normalerweise einige benutzerdefinierte Stile mit sich bringt, aber da wir Normalize verwenden (Video #011), ist das für uns kein Problem.
Wir erstellen ein neues modulares CSS-Bit (_buttons.scss) für unseren eigenen Gebrauch beim Stylen von Schaltflächen auf der gesamten Website. Sehen Sie, was wir da tun? Alles, was sich stilistisch logisch isolieren lässt, erstellen wir in einer neuen Datei. Wir können das so oft tun, wie wir möchten, ohne uns Sorgen zu machen, da die Dateien mit Sass ohnehin alle zusammengefügt werden.
Der dreidimensionale Button-Look wird durch eine ganze Reihe von komma-separierten Box-Schatten erzeugt. Die Farben sind leicht zu ändern, weil wir (Sie ahnten es!) Variablen verwenden.
$bottomSide: #3852b1;
$rightSide: #203891;
.button, #rcp_submit {
border: 0; // kill default styling
background: #4e68c7;
box-shadow:
// right side // bottom
1px 0px 1px $rightSide, 0px 1px 1px $bottomSide,
2px 1px 1px $rightSide, 1px 2px 1px $bottomSide,
3px 2px 1px $rightSide, 2px 3px 1px $bottomSide,
4px 3px 1px $rightSide, 3px 4px 1px $bottomSide,
5px 4px 1px $rightSide, 4px 5px 1px $bottomSide,
6px 5px 1px $rightSide;
}Wir spiegeln die gleichen Stile im Eingabeelement wider (nur auf der *Innenseite* statt auf der Außenseite) und vervollständigen so den 3D-Look. Der Versatz der Schatten entspricht unserer $offset-Variable, was zu einer gewissen Designkonsistenz führt.
Nicht in diesem Video, aber später stellen wir fest, dass die inneren Schatten bei den Eingaben viel einfacher mit nur zwei Rändern anstatt aller Schatten (Rand trifft auf Rand in einem Winkel) zu realisieren sind. Bei der Schaltfläche leider nicht möglich.
Dieser Inline-Input-Stil durchdringt letztendlich alle Eingabestile auf der gesamten Website, im Guten wie im Schlechten.
Ist es bei Google Custom Search möglich, Verzeichnisse/Unterordner in einem bestimmten Fall auszuschließen? Ich denke gerade an das Problem der Blog-Suche – anstatt nur im Blog zu suchen – wäre es möglich, alles außer dem Blog in einer separaten Suchfunktion auszuschließen?
HMMMMMM. SEHR SCHLAU. Genau das machen wir bei CodePen, um Ergebnisse zu verfeinern. Aus irgendeinem Grund habe ich dort nicht daran gedacht. Ich werde sehen, was ich tun kann.
Hallo Chris,
Etwas abseits des Themas dieses Videos, aber könnten Sie bitte etwas mehr über das @import-Problem erklären, das Sie hatten? Ich habe gerade mit Sass und Codekit angefangen, nachdem ich diese Videos gesehen habe, und möchte sicherstellen, dass ich den URL, wenn nötig, verwende. Jede Hilfe wäre großartig.
Die Verwendung von @import in Sass ist fantastisch. Es funktioniert wie ein PHP-Include, es holt den Inhalt der von Ihnen referenzierten Datei und fügt ihn dort in die endgültige kompilierte Version ein.
Sie können auch in normalem CSS @import verwenden. Es funktioniert jedoch etwas anders. Es bezieht sich nur auf die von Ihnen angegebene Datei. Es verhält sich so, als hätten Sie sie eingebunden, aber es muss eine Anfrage für die Datei senden.
Auch die Syntax ist leicht unterschiedlich.
SCSS: @import "datei.scss";
CSS: @import url("datei.scss");
Technisch gesehen erlaubt die Spezifikation beide Syntaxvarianten in normalem CSS, aber wie bei allem variiert die Browserunterstützung, und es ist sicherer, die url()-Syntax zu verwenden.
Hallo Chris,
Sie sind vielleicht nicht allzu besorgt darüber, aber ...
diese beiden Dinge haben meinen Entwicklungs-Workflow innerhalb von ST2 drastisch beschleunigt:
Zen Coding – fantastische Autovervollständigung. Erstellt schnell UL/LI-Navigationsleisten und füllt per Tab auf
CMD-Klick für Mehrfachauswahl mit Cursor – ein Beispiel wäre $rightSide $bottomSide
Danke,
tolles Video
Ich bin mit diesen Dingen nicht sehr vertraut, aber Sie werden erfreut sein zu wissen, dass beide in dieser Serie vorkommen und wir sie besprechen und ein wenig verwenden.
Was die Beiträge unter /blog/ betrifft, denke ich, ich habe eine gute Lösung gefunden. Sie können es einfach über die WP-Einstellungen ändern, um den Blog hinzuzufügen, und indem wir uns in den 404-Handler einklinken, können wir prüfen, ob ein Link existiert, indem wir /blog/ hinzufügen (falls er nicht vorhanden ist) und korrekt umleiten, wenn er vorhanden ist, und Ihnen so den ganzen SEO-Nachteil ersparen.
Ich gehe auf GitHub detaillierter darauf ein, aber ich habe das auf anderen Systemen gemacht und bin zuversichtlich, dass es auf WordPress funktionieren würde, man muss sich nur in den „Seite nicht gefunden“-Handler einklinken.
Zur /blog/-Frage, können Sie nicht theoretisch alle Ihre Kategorien unter einer Kategorie namens „blog“ (oder ähnlich) zusammenfassen? Es ist ein bisschen schmutziger, aber ich glaube, es würde funktionieren.
Das Suchproblem wurde durch die Erstellung einer neuen Google-Suchmaschine mit Ausschlussfiltern für alle Unterabschnitte der Website gelöst, sodass nur Blogbeiträge zurückgegeben werden.