diedVIPs

html knowhow

Iframe als Starwars









Iframe als Starwars

So sieht´s aus


Iframe als Starwars

Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können. Html, CSS und Java bieten da super Möglichkeiten der Webseiten-Gestaltung. Bevor Sie aber mit Ihrem Homepage-Projekt beginnen, sollten Sie sich über Grundsätzliches informieren, damit Sie wissen, was alles auf Sie zukommt. Ich gebe Homepage-Designern Tipps, wie sie ihren Webauftritt verbessern können.

Viele, die eine Webseite betreiben wollen, greifen auf vorgefertigt Seiten zurück. Die gibt es z.B. bei Ionos, Jamdo, Strato und vielen, vielen mehr. Aber wer etwas Individuelles haben möchte, der macht alles selber. Es lohnt sich garantiert. Ein Styling, das keinem anderen gleicht.

Alle hier dargestellten Modelle habe ich persönlich getestet und sie funktionieren hervorragend, wie Sie auf den folgenden Seiten feststellen werden. Aber wie machen wir das am Besten?

Ich habe Ihnen hier ein paar ausgewählte, sehr praktische Abwendungen vorgestellt, die Sie bestimmt gut gebrauchen können. Außerdem habe ich versucht, meta-tags und css-tags verständlich zu erklären, ohne viel Fachchinesisch. Viel Spaß ...



Quellcode
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style type="text/css">
*{ box-sizing: border-box;}
iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
.tab-wrap {position: relative; background: blue; width: 60%; height: 300px; max-width: 800px; max-height: 420px; margin: 0 auto 0; padding: 30px;
border-radius: 30px; transition: transform 0.75s ease, box-shadow 0.75s ease;}
.tab-wrap.skew{transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, -0.0008,
0, 0, 1, 0,
0, 0, 0, 1);
box-shadow:
0px 2px 0 -1px green,
0px 4px 0 -2px green,
0px 6px 0 -3px green,
0px 8px 0 -4px green;}
.tab-wrap.skewback{transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0.0008,
0, 0, 1, 0,
0, 0, 0, 1);
box-shadow:
0px -2px 0 -1px aqua,
0px -4px 0 -2px aqua,
0px -6px 0 -3px aqua,
0px -8px 0 -4px aqua;
}
.tab-wrap.noskew{transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
box-shadow: 0px 3px 0px -1px fuchsia;}

</style>
</head>

<body >
<div id="tab-container">
<div class="tab-wrap"><span class="dot"><img width="90%" alt="" src="../Bilder/drehen.png" /></span>
<div class="tab"><h1 class="title">Iframe als Starwars</h1>
<p>Ihr Text</p>
<p>Ihr Text</p>
<p>Ihr Text</p>
</div></div>
</div>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(window).resize(function(){
fitui();
});
$(document).ready(function(){
fitui();
setTimeout(function(){
$('.tab-wrap').addClass('skew')
},750);
});
$('.dot').click(function(){
/* $('.tab-wrap').toggleClass('skew');*/
});

var count = 0;
$( ".dot" ).each(function() {
var $thisdot = $( this );
var count = 0;
$thisdot.click(function() {
count++;
$thisdot.parent('.tab-wrap').toggleClass( "skew", count % 3 === 0 );
$thisdot.parent('.tab-wrap').toggleClass( "noskew", count % 3 === 1 );
$thisdot.parent('.tab-wrap').toggleClass( "skewback", count % 3 === 2 );
});
});

function fitui(){
var winwid = $(window).width();
var tabwid = winwid*.7;
$('.tab-wrap').outerWidth(tabwid);
$('.tab-wrap').outerHeight(tabwid/1.9);
$('.tab-wrap').css({
'margin-bottom' : tabwid * 0.15,
'font-size' : tabwid * 0.025,
'padding' : tabwid * 0.05,
'border-radius' : tabwid * 0.05
});
$('.tab-wrap .dot').css({
'width' : tabwid * 0.035,
'height' : tabwid * 0.035,
'bottom' : tabwid * 0.008,
'left' : 'calc(50% - ('+tabwid * 0.035+') )'
});
}
</script>

</body>

</html>








Kontakt    Datenschutz    Impressum