admin, Author at Alaoğlu Tasarım | Fikirlerinizi Tasarlar | Web Tasarım & Grafik Tasarım Hizmetleri | Sayfa 3 / 3

Otomatik Kepenk

Otomatik Kepenk 

En iyi Otomatik Kepenk markası XDOOR otomatik kapı sistemlerinde.

Otomatik kapı, Otomatik Kepenk, Fotoselli kapı, bariyer, kapı motoru ve usta & İnşaat hizmetleri ile birlikte 7/24 Hizmet Sunmaktadır.

XDOOR Otomatik Kepenk

Güvenlik ve estetiğin birleşimi otomatik kepenk sistemleri yapı otomasyon çözümlerinin en önemli unsurlarıdır. Kullanım amaçlarına göre degişik hammadde ve nitelikli lamellerden imal edilen kepenk sistemleri kullanım rahatlığı ve uygulandığı alana kattığı değer ile yenilikçi kullanıcıların tercihidir.

7/24 Acil Kepenk Tamir Servisi

Firmamız; mağazalarınızda ve işyerlerinizde kullanmış olduğunuz otomatik kepenk ile ilgili olarak her türlü tamir, bakım ve onarım hizmeti vermektedir. Otomatik Kepenk Tamiri ve Otomatik Kepenk Servisi için İSTANBUL’un bütün ilçelerinde 7/24 hizmet vermekteyiz.

Otomatik kepenk motoru, otomatik kepenk kumandası, otomatik kepenk alıcı ünitesi ve kepenk ile ilgili bütün yedek malzemeleri bizden temin ederbilirsiniz.

Uzun yıllar iş tecrübesi ve uzman kadromuzla, kapılarınıza alternatif çözümler, tamir ve servis hizmeti sunmaktayız.

Diğer faaliyet alanlarımız ise; garaj kapısı tamiri ve servisi, fotoselli kapı tamiri ve servisi, otomatik kepenk tamiri ve servisi, bahçe kapısı tamiri ve servisi, otomatik bariyer tamiri ve servisi, seksiyonel kapı tamiri ve servisi, Otomatik Panjur tamiri ve servisi, PVC Hızlı kapı tamiri ve servisi v.s. her çeşit otomatik kapı ve otomatik geçiş sistemleri ile ilgili tamir ve servis hizmeti siz değerli müşterilerimize vermekteyiz.

Fotoselli Kapı

Fotoselli Kapı

İstanbul Fotoselli Kapı XDOOR.com da!!

Fotoselli kapının En Kalitelisi XDOOR Otomatik Kapı Sistemlerinde.

Fotoselli Kapılar

Özellikle son dönemde, birçok yerde karşılaşmış olduğumuz yana kayarlı otomatik kapı modelidir.

Günümüz dünyasının vazgeçilmez bir konforu olan Fotoselli Kapılar, neredeyse her yerde karşımıza çıkıyor.

Birçok mağaza, işyeri ve benzeri yerlerin Fotoselli Kapı kullandığına sıkça şahit oluyoruz.

Tercih edilirliği her geçen gün daha da artan bu kapılar, konforu arttırmaları ve standartların üzerinde yer almaları nedeni ile dikkat çekmektedir.

Bu konuda da yanınızda olan, yani Fotoselli Kapı satış ıda yapan firmamız, satış ve kurulumunun yanısıra, Fotoselli Kapı tamirine de imza atmaktadır.

Kaliteli ürünleri ve profesyonel personelleri ile, Fotoselli Kapı işlerinizde yanınızda XDOOR.com u bulabilirsiniz.

Sizde işletmenize, işyerinize ya da şirketinize bir fotoselli kapı yaptırmak istemez misiniz? Zaten Fotoselli Kapı fiyatları konusunda bir araştırma yapıyorum diyorsanız, İstanbul da hizmet veren firmamıza uğramanızı tavsiye ederiz.

Uygun fiyatları, size en makul olabilecek çözümleri ve kurumsal kimliği ile her açıdan dikkatinizi çekmeyi başarabilecek olan firmamızla çalışmanız halinde pişman olmayacağınıza emin olabilirsiniz.

İstanbul da etkin ve profesyonel Fotoselli Kapı çözümleri için, XDOOR Otomatik Kapı Sistemleri tam size göre.

XDOOR Fotoselli Kapı

Kapı boşlugu üzerine asılan bir ray üzerinde kayarak hareket eden tek veya çift yöne açılan kanatlardan oluşan bir kayar kapı düzeneğinin otomatik hale getirilmesine fotoselli kapı adı verilir.fotoselli kapı Ray profili dişli kayış çarkları otomatik kapı motorları ve algılama elemanlarından gelen sinyali hareket komutuna çevirecek olan mikroprosesör işlemci(ögrenebilir elektronik devre) başka bir deyişle anakart v.b elektronik devreleri üzerinde barındırır.XDOOR FOTOSELLİ KAPI alanında kendini sürekli geliştirerek üretimde sektördeki üreticiler arasında yer almıştır.

CSS ile Ghost Button nasıl hazırlanır?

Günümüz web tasarımı trendlerinden biri de Türkçe karşılığıyla hayalet butonlar.

Literatüre göre ghost button, web sayfalarının birincil aksiyonuna kullanıcıları taşımakla ilişkilendirilmiş. Ayrıca çizgisel ve şık bir tasarıma sahip bu butonlar sitenizin cazibesini arttırmanıza yardımcı olacaktır.

Bu dersimizde sizlerle birlikte CSS kullanarak iki adet ghost button tasarımı oluşturacağız.

Sadece CSS ile HTML5 Ghost Button nasıl hazırlanır?

Örneğimizi hem koyu zeminler hem de açık renk zeminlerde çalışacak şekilde hazırlamakta fayda var. Kodlarımız içerisinde geçecek olan inverted classı açık renk zeminler için olan versiyonu olacak. Makalenin başından beri buton diye çağırıyoruz ancak burada kullanacağımız elemanın tipi anchor olacak. Yani button değil a etiketi kullanacağız. Bunun sebebi daha popüler ve kolay kullanılabilir olması.

Hazırsanız başlayalım.


HTML Kodları

HTML tarafında çok fazla bir işimiz yok. Eğer koyu renk bir zeminde çalışıyorsanız aşağıdakini :

<a class="ghost" href="#">Ghost Button</a>

Açık bir zaminde çalışacak iseniz de aşağıdaki kodu kullanabilirsiniz :

<a class="ghost inverted" href="#">Ghost Button</a>

CSS Kodları

Tasarımda şık ve okunulabilirliği yüksek olan Roboto fontunu kullandık. Eğer web sitenizde yüklü değilse ilgili CSS dosyanızın en üstüne aşağıdaki satırı ekleyerek başlayın. Google Web Fonts hakkında daha fazla bilgi almak isterseniz de burayı tıklayın.

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,700&subset=latin-ext';

Şimdi varsayılan buton tasarımımızı yapalım. Daha sonrada inverted versiyonumuzun normal halini çizelim.

a.ghost{
  display:table;
  background-color:transparent;
  background-image: linear-gradient(to bottom,transparent 50%white 50%);
  background-size100% 200%;
  text-transformuppercase;
  font:300 18px 'Roboto'sans-serif;
  letter-spacing:2px;
  color:white;
  border:1px solid white;
  border-radius:35px;
  padding:15px 45px;
  text-decoration:none;
  transition:background-position 0.6s,color 0.6s,box-shadow 0.6s,margin-top0.6s;
}
a.ghost.inverted{
  background-image: linear-gradient(to bottom,transparent 50%#536DFE 50%);
  color:#536DFE;
  border:1px solid #536DFE;
}

Dikkat ettiyseniz arkaplan resmi için linear-gradient belirledik. Böylece yarısı transparan yarısı da renkli olan bir planımız oluyor. Daha sonra da üstlerine gelindiğinde bunları yukarı aşağı kaydırabilir olacağız. Tabii bu işlem için de background-position özelliğini kullanacağız.

Mobil Uygulama Tasarımı ve Yazılımı Arasındaki Köprü, Zeplin!

Bugün Sketch App ve Photoshop ile entegre olarak çalışabilen ve mobil uygulama tasarımlarınızı doğru bir şekilde geliştiricilere aktarmanızı sağlayan Zeplin‘i konuşacağız.

Mobil uygulama tasarımı nasıl hazırlanır? Nasıl geliştiriciye teslim edilir?

Mobil uygulama tasarımı yaparken tasarımın birden fazla mobil cihazda düzgün görüntülenebilir kılmak istersek uygulama içi tüm görselleri farklı çözünürlüklerde kaydedip klasörlememiz gerekir. Bu işlem de neredeyse tasarımın kendisini yapmaktan daha fazla vakit alan karmaşık bir süreç. İşte tam bu esnada yardımımıza yerli bir yapım olan Zeplin erişiyor.

Facebook, Twitter ve Diğer Sosyal Ağların Fotoğraf ve Resim Ölçüleri

Sosyal medya olmazsa olmaz. Peki hem kendi hesaplarınızın profillerini hem de işletmenizin sayfasını nasıl daha şık hale getireceksiniz? İşte tüm sosyal ağ görsel boyutları ve ölçekleri.

Sosyal Ağ Görsel Boyutları

Facebook Resim Boyutları

Kapak fotoğrafı : 851 px genişlik, 315 px yükseklik
Profil resmi: 180 px genişlik, 180 px yükseklik
Öne çıkarılmış görsel: 1200 px genişlik, 717 px yükseklik
Paylaşılan görsel: 1200 px genişlik, 630 px yükseklik
Paylaşılan linkin önizleme resmi: 1200 px genişlik, 627 px yükseklik

LinkedIn Resim Boyutları

Arkaplan resmi: 1500 px genişlik, 425 px yükseklik
Profil resmi: 400 px genişlik, 400 px yükseklik
Kariyer kapak fotoğrafı: 974 px genişlik, 330 px yükseklik
Banner resmi: 646 px genişlik, 220 px yükseklik (en az)
Standart logo: 400 px genişlik, 400 pixels yükseklik (en fazla)

Pinterest Resim Boyutları

Profil resmi: 165 px genişlik, 165 px yükseklik
Board görüntüsü: 22 px genişlik, 150 px yükseklik
Pin boyutu: 236 px wide

Instagram Resim Boyutları

Profil resmi: 110 px genişlik, 110 px yükseklik
Fotoğraf boyutu: 1080 px genişlik, 1080 px yükseklik
Fotoğraf önizleme resmi: 161 px genişlik, 161 px yükseklik

Twitter Resim Boyutları

Üst resim: 1500 px genişlik, 500 px yükseklik
Profil resmi: 400 px genişlik, 400 px yükseklik
Akışlardaki fotoğraflar: 440 px genişlik, 220 px yükseklik

YouTube Resim Boyutları

Video resmi: 1280 px genişlik, 760 px yükseklik
Kanal kapak fotoğrafı: 2560 px genişlik, 1440 px yükseklik

Tumblr Resim Boyutları

Profil resmi: 128 px genişlik, 128 px yükseklik
Görsel paylaşımı: 500 px genişlik, 750 px yükseklik

Google+ Resim Boyutları

Profil resmi: 250 px genişlik, 250 px yükseklik
Kapak fotoğrafı: 1080 px genişlik, 608 px yükseklik
Paylaşılan resim (ana akış ekranında): 497 px genişlik, 373 px yükseklik
Paylaşılan resim (sayfanızdaki besleme akışlarında): 150 px genişlik, 150 px yükseklik

CSS3 ve jQuery ile Google Play Tab

Microsoft Windows tasarımıyla hazırladığımız menülerden sonra sıra Google‘ın hazırladığı eşsiz tablara geldi. Google Play‘de yer alan bu kutucuklar görünüşlerinin aksine gayet basit bir yapıya sahipler. CSS3 ve jQuery öğeleri sayesinde tasarımımızı hazırlayalım.

Nasıl hazırlanır?

Kod satılarını CSS, HTML ve JS olmak üzere üçe bölüyorum. Böylece makaleninin devamı daha anlaşılır olacaktır.

Arka plan görseli ile başlayalım. Web sayfanızın CSS kodlarının içindeki body alanına aşağıdaki eklemeyi yapın.

body{background-color#eee;
background-imageurl(data:image/gif;base64,R0lGODlhCAAIAJEAAMzMzP///////wAAACH5BAEHAAIALAAAAAAIAAgAAAINhG4nudroGJBRsYcxKAA7);}

Evet bu çizgili arka planı siteye dahil etti. Sırada ise diğer CSS kodlarımız var.

#tab{
overflowhidden;
margin0 auto;
padding0;
list-stylenone;
}
#tab,#icerik {width600pxmargin:0 auto;}
#tab li {
floatleft;
margin0 -15px 0 0;
}
#tab a {
floatleft;
positionrelative;
padding0 25px;
height0;
line-height30px;
text-transformuppercase;
text-decorationnone;
color#fff;
border-right30px solid transparent;
border-bottom30px solid #3D3D3D;
border-bottom-color#777\9;
opacity: .3;
filter: alpha(opacity=30);
}
#tab a:hover,
#tab a:focus {
border-bottom-color#2ac7e1;
opacity: 1;
filter: alpha(opacity=100);
}
#tab a:focus {
outline0;
}
#tab #current {
z-index3;
border-bottom-color#3d3d3d;
opacity: 1;
filter: alpha(opacity=100);
}
#icerik {
background#fff;
border-top2px solid #3d3d3d;
}
#icerik div{padding:1em;}

Şimdi <body></body> içerisine, tasarımın gözükmesini istediğimi yere ekleyeceğimiz HTML kodları var.

<ul id="tab">
<li><a href="#" name="#tab1" id="current">adobewordpress</a></li>
<li><a href="#" name="#tab2" id="">photoshop</a></li>
<li><a href="#" name="#tab3" id="">wordpress</a></li>
<li><a href="#" name="#tab4" id="">araçlar</a></li>
</ul>
<div id="icerik">
<div id="tab1" style="display: block;">
<h2>Ne sunuyoruz?</h2>
<p>Alaoğlu Tasarım ailesi olarak siz ziyaretçilerimize eşsiz makaleler sunuyoruz.</p>
<p>Daha önce Türkiye'de yapılmamışı yapıyoruz, Photoshop, WordPress, HTML5, CSS3, SEO ve tasarım temalı Türkçe makaleler yazıyoruz.</p>
<h2>Videolar hazırlıyoruz!</h2>
<p>Karışık gibi gözüken görsel efektleri video derslerimiz ile dakikalar içerisinde anlatıyoruz.</p>
</div>
<div id="tab2" style="display: none;">
<h2>Usta bir Photoshop kullanıcısı olmak ister misiniz?</h2>
<p>Artık Photoshop ile özgürlügün tadını çıkaracaksınız. Çok zor gözüken efektlerin hiç öyle olmadiklarını öğreneceksiniz.</p>
<p>Sık güncellenen Photoshop bölümümüz sayesinde profesyonel bir Photoshop kullanıcısı olabilirsiniz.</p>
</div>
<div id="tab3" style="display: none;">
<h2>WordPress sitenizi şahesere dönüştürün!</h2>
<p>İddiali olduğumuz bir diğer kategorimiz ise WordPress. Ücretsiz paylaşımlarımız sayesinde web sayfalarınızı şahesere dönüştüreceksiniz.</p>
<h2>Siteniz yeterince iyi mi?</h2>
<p>Dünyanin en çok kullanılan hazır site tasarımlarindan olan WordPress ile sitenizi kurdunuz ve yayinladiniz, peki ziyaretçileriniz için her şey hazır mi? Tasarımınızda problemler var mı? Peki siteniz yeterince güvenli mi?</p>
<p>Bütün sorularınızın cevabı WordPress makalelerimizde!</p>
</div>
<div id="tab4" style="display: none;">
<h2>CSS3, HTML5, SEO ve tüm tasarım unsurları sizi bekliyor!</h2>
<p>Alaoglu Tasarım Web 1.0'dan beri burada ve sizlere gelişen teknolojiyi daha yakindan tanıma sanşı sunuyor.</p>
<p>Tasarımın temeline hakim olan yeni teknolojileri detaylı anlatım ve örneklemelerimizle daha iyi öğrenebilirsiniz.</p>
</div>
</div>

Bu kodların altına ise jQuery dosyamızı ekleyelim.

Ve onun da altına geriye kalan JavaScript kodlarımızı ekleyelim.

<script>
function resetTabs(){$("#icerik > div").hide();$("#tab a").attr("id",""); }
var myUrl = window.location.href;
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0,4);
(function(){$("#icerik > div").hide();$("#tab li:first a").attr("id","current");
$("#icerik > div:first").fadeIn();
$("#tab a").on("click",function(e) {e.preventDefault();
if ($(this).attr("id") == "current"){  return else{
resetTabs();$(this).attr("id","current");
$($(this).attr('name')).fadeIn();}});
for (i = 1; i <= $("#tab li").length; i++) {
if (myUrlTab == myUrlTabName + i) {resetTabs();
$("a[name='"+myUrlTab+"']").attr("id","current");
$(myUrlTab).fadeIn();}}})()
</script>

Her şey hazır!

Material Design Öne Çıkarılmış Menü Tasarımı

Web sitenize NTVspor  da kullanılan material design menü tasarımını eklemek ister misiniz? Özellikle mobil erişimlerde öne çıkarılmasını istediğiniz içerikleri listelemenize yardımcı olacak bu tasarımı hazırlamak tahmin ettiğinizden de basit.

Material Design Floating Action Button

Ekranın sağ altında gözüken buton tasarımı bu şekilde isimlendirilmekte. Biz bu kısma menü tasarımı da ekleyerek farklı bir varyasyon oluşturacağız. Hazırsanız başlayalım.

HTML Kodları

İlk olarak md-primary classına sahip bir div oluşturup içerisine görünmez bir ul ekliyoruz. Sonrasında da bir buton tasarımı için a elemanına ihtiyacımız olacak.

<div class="md-primary">
<ul style="display:none;">
  <li><a href="#">MENÜ 1</a></li>
  <li><a href="#">MENÜ 2</a></li>
  <li><a href="#">MENÜ 3</a></li>
  <li><a href="#">MENÜ 4</a></li>
  </ul>
</div>
<a class="md-primary-btn"><i class="fa fa-bars" aria-hidden="true"></i></a>

CSS Kodları

Menü aktif edildiğinde olması gereken işlemleri belirleyelim. Öncelikle ekran kararmalı.

div.md-primary.activated {
  background-color: rgba(1110.5);
  positionfixed;
  top0;
  right0;
  bottom0;
  left0;
}

 

div.md-primary.activated ul {
  position:absolute;
  right:30px;
  bottom:86px;
  list-style:none;
}
div.md-primary.activated ul li{
  padding:6px 12px;
  background-color:rgba(1,1,1,0.6);
  border-radius:15px;
  margin-bottom:5px;
}
div.md-primary.activated ul li a{
  text-decorationnone;
  color:white;
}
div.md-primary.activated ul li:hover{
  background-color:rgba(1,1,1,0.8);
}

Son olarak da butonumuzun tasarımını yapalım.

a.md-primary-btn {
  background-color#448AFF;
  positionabsolute;
  bottom30px;
  right30px;
  width56px;
  height56px;
  border-radius: 50%;
  color#fff;
  overflowhidden;
  cursorpointer;
  transition: box-shadow 0.2s cubic-bezier(0.400.21);
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0000.26);
  text-align:center;
  line-height:56px;
  font-size:18px;
}

JavaScript Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi tek yapmamız gereken perdenin ve menünün açılıp kapanmasını sağlayacak click fonksiyonlarını yazmak.

$('a.md-primary-btn').click(function(){
  $('div.md-primary').toggleClass('activated')
  $('div.md-primary').find('ul').toggle();
});
$('body').on('click''div.md-primary.activated'function () {
  $('div.md-primary').toggleClass('activated')
  $('div.md-primary').find('ul').toggle();
})

Böylece çalışmamız bitmiş oluyor.

Tıkla Hemen Ara!