Schnelleinstieg "Cheetah"
Arbeiten mit dem Webseiteneditor
SCHNELLEINSTIEG CHEETAH
iFrames und Inline-HTML : Snippets einfügen
Unter "Snippets" versteht man kleine funktioinelle HTML-Code-Schnipsel, die inline in eine Codeseite eingefügt werden und die eine gewisse Funktionalität aufweisen. Als einführendes Beispiel soll hier ein kleines Code-Snippet vorgestellt werden, welches dem Nutzer der Webseite erlaubt, einen Ort einzugeben, um eine Wegbeschreibung auf Google-Maps (wird auf einem separaten Tab geöffnet) zu erhalten. In diesem Beispiel ist der Ausgangspunkt der Flughafen Dresden-Klotzsche:
< form action= "http://maps.google.com/maps" method="get" target="_blank">
< label for="saddr">Wohin willst Du?
< input type="text" name="saddr" />
< input type="hidden" name="daddr" value="Flughafen Dresden (DRS), Flughafenstraße, Klotzsche Dresden" />
< input type="submit" value="Blende Karte auf" />
< /form>
Diesen Code tragen Sie in das Feld "Einbettungscode" des iFrame / HTML - Elements ein und markieren zusätzlich das Markierungsfeld "inline".
1. Hinweis: Bitte beachten Sie hier und in allen anderen Snippets, dass Sie zuvor jeweils das Leerzeichen hinter dem "<" - Zeichen entfernen. Es musste hier in den Codetext eingefügt werden, weil ansonsten der Textinterpreter von Cheetah den Text als nativen HTML-Code interpretiert .
Das Ergebnis sieht folgendermaßen aus (und kann natürlich von Ihnen durch entsprechende Änderungen und Ergänzungen im Snippet-Code noch beliebig angepasst werden):
2. Hinweis: Beim Verschieben des Elements mit der Maus verschwindet manchmal der Inhalt. Um es wieder sichtbar zu machen, klicken Sie zweimal auf das Markierungsfeld "inline" im rechten Editierbereich des HTML-Elements.
Beispiele für weitere kleine Snippets
Im Folgenden sollen einige Snippets (in minimalistischer Form) vorgestellt werden, um als Anregungen für eigene Versuche zu dienen. Was die Sprache HTML betrifft, sei als Kompendium auf die Webseite SelfHTML verwiesen.
Kleines natives Eingabeformular für eMail-Adresse und Passwort
Dieses kleine Snippet kann als Ausgangspunkt zur Programmierung eigener kleiner Eingabemasken zu allen möglichen Zwecken dienen.
< form role="form">
< div class="form-group">
< label for="email">EMail-Adresse:
< input type="email" class="form-control" id="email">
< /div>
< div class="form-group">
< label for="pwd">Password:
< input type="password" class="form-control" id="pwd">
< /div>
< div class="checkbox">
< label> Erinnere mich
< /div>
< button type="submit" class="btn btn-default">Submit
< /form>
Animierte Social-Media Icons
Das man in Builderall Cheetah auch sehr komplexe Inline-Codes einsetzen kann, zeigt dieses Beispiel:
Es wurde 1:1 aus einer Snippet-Bibliothek entnommen, die Sie im Web unter folgender Adresse finden (Bild anklicken):
Und hier nun das komplette Snippet (vor Verwendung bitte wieder Leerzeichen nach "<" entfernen). Beachten Sie, dass die Funktionlität (Aufruf der sozialen Netzwerke) noch fehlt.
< script src="//maxcdn.bootstrapcdn.com /bootstrap/4.1.1/js/bootstrap.min.js">
< script src="//cdnjs.cloudflare.com /ajax/libs/jquery/3.2.1/jquery.min.js">
< !------ Include the above in your HEAD tag ---------->
< html>
< head>
< meta charset="utf-8" />
< meta http-equiv="X-UA-Compatible" content="IE=edge">
< title>Animated
< meta name="viewport" content="width=device-width, initial-scale=1">
< link rel="stylesheet" href="https://cdnjs.cloudflare.com /ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
< link rel="stylesheet" type="text/css" media="screen" href="main.css" />
< script src="main.js">
body{
margin: 0;
padding: 0;
background-color: #ccc;
}
ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
display: flex;
ul li{
list-style: none;
margin: 0 40px;
ul li .fa{
font-size: 40px;
color: #262626;
display:block;line-height: 80px;
transition: .5s;
ul li a{
position: relative;
display: block;
width: 80px;
height: 80px;
background-color: #fff;
text-align: center;
transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0,0);
transition: .5s;
box-shadow: -20px 20px 10px rgb(0, 0, 0, 0.5);
}
ul li a::before{
content: "";
position: absolute;
top: 10px;
left: -20px;
height: 100%;
width: 20px;
background: #b1b1b1;
transition: .5s;
transform: rotate(0deg) skewY(-45deg);
}
ul li a::after{
content: "";
position: absolute;
top: 80px;
left: -11px;
height: 20px;
width: 100%;
background: #b1b1b1;
transition: .5s;
transform: rotate(0deg) skewX(-45deg);
}
ul li a:hover{
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}
ul li:hover .fa{
color: #fff;
}
ul li a:hover{
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}
ul li:hover:nth-child(1) a{
background: #3b5999;
}
background: #2e4a86;
}
ul li:hover:nth-child(1) a:after{
background: #4a69ad;
}
ul li:hover:nth-child(2) a{
background: #55acee;
}
ul li:hover:nth-child(2) a:before{
background: #4184b7;
}
ul li:hover:nth-child(2) a:after{
background: #4d9fde;
}
ul li:hover:nth-child(3) a{
background: #dd4b39;
}
background: #c13929;
}
ul li:hover:nth-child(3) a:after{
background: #e83322;
}
background: #0077B5;
}
background: #036aa0;
}
ul li:hover:nth-child(4) a:after{
background: #0d82bf;
}
background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}
background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}
ul li:hover:nth-child(5) a:after{
background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}
< /style>
< /head>
< body>
< ul>
< li>
< li>
< li>
< li>
< li>
< /ul>
< /body>
< /html>
Bilder mit Skalierungs- und Rotationseffekt bei Mausberührung
Mittels kleiner HTML-Snippets lassen sich leicht durchaus beindruckende Bildeffekte auf mit Builderall erstellten Webseiten erzeugen - wie dieses Beispiel zeigt...
< figcaption>
< h3 class="title1">Fruchtstecher
< /figcaption>
< /figure>
< figure class="snip1581">< img src="{BILDURL}" alt="profile-sample7"/>
< figcaption>
< h3 class="title1">Maikäfer
< /figcaption>
< /figure>
< figure class="snip1581">< img src="{BILDURL}" alt="profile-sample6"/>
< figcaption>
< h3 class="title1">Kiefernrüssler
< /figcaption>
< style>
@import url(https://fonts.googleapis.com/css?family=Poppins:300,700);
.snip1581 {
font-family: 'Poppins:400,700', Arial, sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 10px;
min-width: 250px;
max-width: 310px;
width: 100%;
background-color: #000000;
color: #ffffff;
text-align: left;
font-size: 16px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.snip1581 * {
-webkit-transition: all 0.35s;
transition: all 0.35s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1581 img {
max-width: 100%;
vertical-align: top;
}
.snip1581 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.snip1581 h3 {
font-size: 44px;
font-weight: 400;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
margin: 3px 0;
}
.snip1581 .title1 {
font-weight: 700;
font-size: 25px;
}
.snip1581 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.snip1581:hover img,
.snip1581.hover img {
-webkit-transform: scale(1.3) rotate(5deg);
transform: scale(1.3) rotate(5deg);
}
- Cheetah-Einstieg::-
Startseite Anwendungsgebiete Cheetah-Sitebuilder Mockup-Studio Digital-Magazine-Editor OnPage-SEO Wordpress 3D-Photo-Editor-Studio FAQ