Sekmeli Modal Tasarımı

<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,blog-table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}blog-table{border-collapse:collapse;border-spacing:0}
html{width:100%;height:100%}
body{font-family:"Roboto",sans-serif;color:rgba(0,0,0,0.6);font-size:14px;line-height:1.6em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[ripple]{z-index:1;position:relative;overflow:hidden}
[ripple] .ripple{position:absolute;background:#fff;width:12px;height:12px;border-radius:100%;-webkit-animation:ripple 1.6s;animation:ripple 1.6s}
@-webkit-keyframes ripple{0%{-webkit-transform:scale(1);transform:scale(1);opacity:0.2}100%{-webkit-transform:scale(40);transform:scale(40);opacity:0}}
@keyframes ripple{0%{-webkit-transform:scale(1);transform:scale(1);opacity:0.2}100%{-webkit-transform:scale(40);transform:scale(40);opacity:0}}
.blog-tabs{z-index:15;position:relative;background:#fff;width:600px;border-radius:4px;box-shadow:0 0 30px rgba(0,0,0,0.1);box-sizing:border-box;margin:100px auto 10px;overflow:hidden}
.blog-tabs-header{position:relative;background:#4285F4;overflow:hidden}
.blog-tabs-header .blog-tabs-border{position:absolute;bottom:0;left:0;background:#F4B142;width:auto;height:2px;transition:0.3s ease}
.blog-tabs-header ul{display:flex;flex-direction:row;flex-wrap:wrap;width:calc(100% - 68px)}
.blog-tabs-header li{transition:0.3s ease}
.blog-tabs-header a{z-index:1;display:block;box-sizing:border-box;padding:15px 20px;color:#fff;font-weight:500;text-decoration:none;text-transform:uppercase}
.blog-tabs-nav{position:absolute;top:0;right:0;background:#4285F4;display:flex;align-items:center;height:100%;padding:0 10px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.blog-tabs-nav:before{content:'';z-index:1;position:absolute;top:0;left:0;height:100%;box-shadow:0 0 20px 10px #4285F4}
.blog-tabs-nav span{border-radius:100%;cursor:pointer}
.blog-tab-prev-icons{background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M15.41,16.59L10.83,12l4.58-4.59L14,6l-6,6l6,6L15.41,16.59z'/%3E%3Cpath fill='none' d='M0,0h24v24H0V0z'/%3E%3C/svg%3E%0A");display:inline-block;width:28px;height:28px}
.blog-tab-next-icons{background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z'/%3E%3Cpath fill='none' d='M0,0h24v24H0V0z'/%3E%3C/svg%3E");display:inline-block;width:28px;height:28px}
.blog-tabs-content{position:relative;padding:15px 20px;transition:0.3s ease;overflow:hidden}
.blog-tabs-content:after{content:'';position:absolute;bottom:-1px;left:0;display:block;width:100%;height:1px;box-shadow:0 0 20px 10px #fff}
.blog-tabs-content .blog-tab{display:none}
.blog-tabs-content .blog-tab.active{display:block}
</style>
</head>
<body>
<div class="blog-tabs">
<div class="blog-tabs-header">
<div class="blog-tabs-border"></div>
<ul>
<li class="active"><a href="#blog-tab-1" blog-tab-id="1" ripple="ripple" ripple-color="#fff">tab 1</a></li>
<li><a href="#blog-tab-2" blog-tab-id="2" ripple="ripple" ripple-color="#fff">tab 2</a></li>
<li><a href="#blog-tab-3" blog-tab-id="3" ripple="ripple" ripple-color="#fff">tab 3</a></li>
<li><a href="#blog-tab-4" blog-tab-id="4" ripple="ripple" ripple-color="#fff">tab 4</a></li>
<li><a href="#blog-tab-5" blog-tab-id="5" ripple="ripple" ripple-color="#fff">tab 5</a></li>
</ul>
<nav class="blog-tabs-nav">
<span class="blog-tab-prev-icons" id="prev" ripple="ripple" ripple-color="#fff"></span>
<span class="blog-tab-next-icons" id="next" ripple="ripple" ripple-color="#fff"></span>
</nav>
</div>
<div class="blog-tabs-content">
<div class="blog-tab active" blog-tab-id="1"><b>The Incredible Hulk (2008)</b><br>Edward Norton'ın Hulk olduğu zamanları hatırlar mıyız? İşte The Incredible Hulk, bizim bu yufka yürekli yeşil devle ilk buluşmamızdı. Fena da değildi sanki, ne dersin?<br><br><b>Spider-Man: Homecoming (2017)</b><br>Sony'nin "klasikleşmiş" Örümcek Adam yorumlarının sona ermesiyle yepyeni ve taze bir Spider-Man arayışı içine giren MARVEL, beyazperdenin Peter Parker'ını üçüncü kez değiştirerek 15 yıl içinde ilk defa "sıkmayan" bir Örümcek Adam filmi üretmeyi başardı. Hem "teenager" havası, hem Iron Man göndermeleri, hem de Örümcek Adam'ın bir "çocuk" olduğunu daha fazla hissetmemiz, Homecoming'i iyi bir Spider-Man filmi haline getirdi.</div>
<div class="blog-tab" blog-tab-id="2"><b>Thor (2011)</b><br>İskandinav sinemaseverlerin bağrına bastığı MARVEL karakteri Thor'un (Chris Hemsworth tarafından başarıyla canlandırılıyor) ilk sinema filmi de olmazsa olmazlardan. Tıpkı Hulk'ın ilk filmi gibi ilk Thor filmi de kalplerde özel bir yere sahip.</div>
<div class="blog-tab" blog-tab-id="3"><b>Iron Man 2 (2010)</b><br>İlk Iron Man filmi seyirci tarafından heyecanla karşılanmış ve gişede beklentileri yerine getirmişti ama asıl olarak Robert Downey Jr.'ın ikinci baharını yaşamasına önayak olan film olarak akıllarda yer ediyor.  İlkinin başarısı üzerine yeşil ışık yakılan Iron Man 2 ise ilk film kadar ses getirmese de görevini yaptı ve üçüncü film için de yolu açmış oldu.</div>
<div class="blog-tab" blog-tab-id="4"><b>Ant-Man (2015)</b><br>Ant-Man, MARVEL evrenine ve beyazperde uyarlamalarına bakınca fazla mütevazı görünüyor olabilir, ancak Paul Rudd'ın canlandırdığı Karınca Adam o kadar sempatik ve tatlı ki, onu bu listeye almasaydık kendimizi kötü hissederdik!</div>
<div class="blog-tab" blog-tab-id="5"><b>Captain America: The First Avenger (2011)</b><br>Steve Rogers, askere kabul edilmediği için umudunu bir seruma bağlamıştır ve bu serumun bir dozuyla Kaptan Amerika'ya dönüşür. Ancak yeni gelen güç ve kuvvetin bir bedeli olacaktır... Chris Evans'ın başarılı performansıyla da adından söz ettiren "kıvamında" bir beyazperde uyarlaması.</div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){var t=$(".blog-tabs-header .active").position();function e(){t=$(".blog-tabs-header .active").position(),$(".blog-tabs-border").stop().css({left:t.left,width:$(".blog-tabs-header .active").width()})}e();var a=$(".blog-tab.active").height();function i(){a=$(".blog-tab.active").height(),$(".blog-tabs-content").stop().css({height:a+"px"})}function s(){var t=$(".blog-tabs-header .active a").attr("blog-tab-id");$(".blog-tab").stop().fadeOut(300,function(){$(this).removeClass("active")}).hide(),$(".blog-tab[blog-tab-id="+t+"]").stop().fadeIn(300,function(){$(this).addClass("active"),i()})}i(),$(".blog-tabs-header a").on("click",function(t){t.preventDefault();var a=$(this).attr("blog-tab-id");$(".blog-tabs-header a").stop().parent().removeClass("active"),$(this).stop().parent().addClass("active"),e(),n=c.filter(".active"),$(".blog-tab").stop().fadeOut(300,function(){$(this).removeClass("active")}).hide(),$('.blog-tab[blog-tab-id="'+a+'"]').stop().fadeIn(300,function(){$(this).addClass("active"),i()})});var c=$(".blog-tabs-header ul li"),n=c.filter(".active");$("#next").on("click",function(t){t.preventDefault();var a=n.next();n.removeClass("active"),n=a.length?a.addClass("active"):c.first().addClass("active"),e(),s()}),$("#prev").on("click",function(t){t.preventDefault();var a=n.prev();n.removeClass("active"),n=a.length?a.addClass("active"):c.last().addClass("active"),e(),s()}),$("[ripple]").on("click",function(t){var a=$('<div class="ripple" />'),e=$(this).offset(),i=t.pageY-e.top,s=t.pageX-e.left,c=$(".ripple");a.css({top:i-c.height()/2,left:s-c.width()/2,background:$(this).attr("ripple-color")}).appendTo($(this)),window.setTimeout(function(){a.remove()},1500)})});
</script>
</body>
</html>

<!DOCTYPE html><html><head><style>@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,blog-table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}blog-table{border-collapse:collapse;border-spacing:0}html{width:100%;height:100%}body{font-family:"Roboto",sans-serif;color:rgba(0,0,0,0.6);font-size:14px;line-height:1.6em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[ripple]{z-index:1;position:relative;overflow:hidden}[ripple] .ripple{position:absolute;background:#fff;width:12px;height:12px;border-radius:100%;-webkit-animation:ripple 1.6s;animation:ripple 1.6s}@-webkit-keyframes ripple{0%{-webkit-transform:scale(1);transform:scale(1);opacity:0.2}100%{-webkit-transform:scale(40);transform:scale(40);opacity:0}}@keyframes ripple{0%{-webkit-transform:scale(1);transform:scale(1);opacity:0.2}100%{-webkit-transform:scale(40);transform:scale(40);opacity:0}}.blog-tabs{z-index:15;position:relative;background:#fff;width:600px;border-radius:4px;box-shadow:0 0 30px rgba(0,0,0,0.1);box-sizing:border-box;margin:100px auto 10px;overflow:hidden}.blog-tabs-header{position:relative;background:#4285F4;overflow:hidden}.blog-tabs-header .blog-tabs-border{position:absolute;bottom:0;left:0;background:#F4B142;width:auto;height:2px;transition:0.3s ease}.blog-tabs-header ul{display:flex;flex-direction:row;flex-wrap:wrap;width:calc(100% - 68px)}.blog-tabs-header li{transition:0.3s ease}.blog-tabs-header a{z-index:1;display:block;box-sizing:border-box;padding:15px 20px;color:#fff;font-weight:500;text-decoration:none;text-transform:uppercase}.blog-tabs-nav{position:absolute;top:0;right:0;background:#4285F4;display:flex;align-items:center;height:100%;padding:0 10px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.blog-tabs-nav:before{content:'';z-index:1;position:absolute;top:0;left:0;height:100%;box-shadow:0 0 20px 10px #4285F4}.blog-tabs-nav span{border-radius:100%;cursor:pointer}
 
 

Kodeks Editör

Sekmeli Modal Tasarımı

"Sekmeli Modal Tasarımı" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Sekmeli Modal Tasarımı

"Sekmeli Modal Tasarımı" 0 Yorum yapıldı.

Yorum Gönder