70多張創意名片設計

70多張創意名片設計，商業名片設計，是企業的基本UI設計內容，這些名片設計採用了很多大膽，新穎的設計形式，還有很多特殊工藝，些也是成本不菲！不過對於我們來說只要獲得靈感就是收穫！


For-ward by Robbie Powel (www.thisisrobbie.com)


Viewzi (viewzi.com)


Alone and Unafraid Business Card by 3 Advertising


Chokolate mmm* by bunch design (www.bunchdesign.com)


Unique Business Card by By Francisco Giner


Stills By Hill - Identity Kitchen (identitykitchen.com)


Moker


Business Card for Door of Hope by Print Pinball


Business Card for Door of Hope by Print Pinball


AFOM Business cards by grafikcache


Ateliê Biscuit by leti !


Green Business Card by By Bernard Hellen


Once Magazine Logo by Rasmus Enstrom (www.rasmusenstrom.se)


Business Card for: B. Uhrig &amP; Son


Gabriel Von Doscht


Sack Wear by 3 Advertising (www.whois3.com)


Identity Kitchen (identitykitchen.com)


Swift Ceiling by 350 Designs (350designs.com)


Matilda Jane by One Lucky Guitar (www.oneluckyguitar.com)


Business Card for Courtney Danforth by Jonathan Danforth


Business Card for Hugo Fernández by Low ink studio


Business Card for Itomi by Antonio Moro


Spot UV Business Cards by UV Cards


Boyle Design GrouP


Black &amP; White Letterpress By Francisco Giner


Business card with 3D glasses by Raphael Essoo-Snowdon


The royal chains by Kelli Anderson


Genocom Media GrouP


Niramekko Business Card by Rodrigo Saiani &amP; Gustavo Saiani


Web.Burza (web.burza.hr)


Mini Business Card By Amber Foley


Windsor Assurance LLC


Finished by Ion Design (www.iondesign.ca)


Football For All by design-ed (www.design-ed.co.uk)


40 Sardines by Barkley Evergreen &amP; Partners (www.beaP.com)


Recycled Business Card By Atajografico


DJ Mohit Business Card By Deepak Nagar &amP; Nasheet Shadani


Creative Spark


DrillSpot (www.drillspot.com)


Fred Duba


Felix Auer (www.felixauer.at)


Kenspecklegifts


Custom Business Card By Philippe Gauthier


New SuperWindy business cards by iamaaronmartin


Julie Anne's CDI Studios (www.cdistudios.com)


Secret agent by Clockwork


I Love Typography


Rhythm kitchen by Studio mikmik


Jolly Roger Business Card By Marco Belletti


Two in the bush by Paddy Duke


Square Business Cards By Christine Imaizumi


JK O'Donnell's by One Lucky Guitar (www.oneluckyguitar.com)


Second Block (www.secondblock.com)


Handmade cafe by Sergey Shapiro


Ruthie Co. by Dingbat Press


Promptt (www.promptt.com)


Platform 626 by KeyLyt (keylyt.com)


Branded Business Cards By Christian Garbaldi


Public Class by That's Dancemade (www.dancemade.com)


Todd Lasher by Ditroen Design


Letterpress Business Card by By Peter Fraterdeus


Rosenthal photography


Letterpress business cards by Sweet Olive Press


Edged Color Business Card By Blok Design


Fabien Barral (www.fabienbarral.com)


Redbox Media Business Cards by John Oliver


Sebastian Weigelt


Ride Qi Business Card by Citizen Chan


Business Card By Deuce Creative


Seaward Bread Bakery by Woods and Weather (woodsandweather.com)


Set &amP; Drift by Sean Kelley (www.seankelley.net


Base One Business Cards by dan.osman


Business Cards of Jose Miguel Arnaldos by josemif

文章提供: BAYSTARS DESIGN網頁設計公司

YouTube 影片下載與轉檔

一、YouTube 影片下載

YouTube 網址：http://www.youtube.com、http://tw.youtube.com/
GooTube FLV Retriever：http://kej.tw/flvretriever/
YourV：http://www.yourv.net/index_tc.php (目前已停用)
Orbit Downloader：http://www.orbitdownloader.com/

一般要找出網頁中的影片檔網址，可以打開它的 HTML 原始檔，尋找
文章提供: BAYSTARS DESIGN網頁設計公司

[jQuery] lightbox 彈出時造成頁面上的 Flash 消失

最近工做上需求使用了 lightbox2 燈箱效果（jQuery 版，jquery-lightbox-0.5.js），而當 lightbox 彈出後，頁面上的 Flash 項目卻都消失了。看了一下 jquery-lightbox-0.5.js 的原始碼，原來是為了避免 Flash 顯示於最上層，也就是跑到 overlay 黑底的上面，而加上蹦現時將 embed、object 與 select 元素隱藏的語法。

其實可以利用 Flash 的 wmode 屬性避免這種現象，同時也可在燈箱效果出現時顯示 Flash（當然，是在 overlay 黑底下方）。

1、首先打開 jquery-lightbox-0.5.js，在約 68 行處找到：

程序代碼

1 $('embed, object, select').css({ 'visibility' : 'hidden' });

將該行刪除或加上註解，使之失效。

2、接著至原 HTML 頁面，將 Flash 項目加上 wmode 屬性，屬性值 transparent。
此部份自行搜尋關於 Flash 與 DIV 圖層先後順序的問題，在此不再贅述。

如此應該就能在 lightbox 效果出現時，保持 Flash 項目了。

文章提供: BAYSTARS DESIGN網頁設計公司

跨瀏覽器邊框探索

雖然起了一個看似很牛逼的題目，但本文可以說完全是蛋疼的人（比如我~）的一種消遣~通常開發人員都有自己的放鬆方式。緣起壇裡某位xd問的一個關於邊框的問題，於是就打算搞搞清楚。寫文章用不了太久，倒是圖材準備了老半天。謹以此文，讓我們來消遣下各個瀏覽器對於邊框的理解方式。

參與此次測試的瀏覽器包括windows下的幾乎全部：ie6，ie7，ie8，ie9preview，chrome，firefox，safari，opera，seamonkey。各版本皆為網上下載的最新版。並且由於這次的測試裡，IE678的表現一致，firefox和seamonkey又是裙帶，所以合併作IE8和firefox。下圖就是這次瀏覽器的截圖：



上面的這種排列順序是故意的。下面的測試裡就會顯示出其原因，截圖也都是按照這個順序排列的。

首先看下面這張圖，六種瀏覽器裡顯示了一個20X20的DIV，其邊框為top:2px，其餘1px。似乎沒有什麼不同。這是由於1px的細微讓我們沒有在意。(事實上這整個問題我們本來就不需要在意~)



先把問題簡單化，單邊2px，三邊1px，並將結果放大5倍，我們能清楚的看到這種差異——opera和safari相反，ie8缺胳膊少腿，下面三個傢伙一致~這裡要注意到的是第二行3者在交匯處都有漸進效果。



也許我們該讓這種效果變得更加明顯。當僅僅加粗單邊之後(10px)，IE8的怪癖顯露無疑。opera和safari依舊相對。下面3個統一戰線的漸進變的更加明顯。



假如顛倒下會是怎樣？3邊加厚，結果是有些出乎意料的。opera的表現很詭異，換句話說，它頂上的那條線，在上面的例子裡「優先」了只是一種巧合。IE表現的更加像opera，而不是它缺胳膊少腿的一貫形象。safari貫徹始終，並且，下面三個傢伙的結果也是意料之內的。



回到最開始第一幅圖的地方。用4種顏色分別畫4條邊。這裡仍舊是放大5倍，現在就能更加清楚的看到IE8的做法。



在邊框寬度都相同的情況下，每個瀏覽器都表現的挺好。對於邊框斜角的應用我最早在《Eric Meyer on CSS 1》裡看到。這種45度斜角使用上沒有危險性，但是其他角度就未必是這樣了，特別是用在雙線的時候。
這裡留意下面三個截圖，FF和chrome，ie9的表現是不同的。可以看到漸進的處理方式不相同。chrome和ie9交匯處有白邊，但是FF沒有。



下面就是雙線了，這又出了一個問題，就是ie9的雙線是糊的…由於用的是4條等寬邊框，其它看起來似乎都不錯。



於是，換用一種糟糕點的角度呢？ie8首先不成框樣，居然用空隙…感覺上非常粗糙。另外ie9糊的真水…



當我再嘗試一些角度時，Opera也出問題了，它的邊框顯得多餘很難看，簡直和ie8有的一拼…



當然，本來瀏覽器對於線型的解釋就不同，所以實線之外的，就沒有什麼參考價值了，這裡僅做娛樂~~
dotted之後，盡顯衣缽本色。



dashed又如何？同是webkit，表現卻並不像剛才的dotted那麼相同。ie8依舊很詭異，只有4個點，上下的線消失了…事實上，之所以這裡把DIV加長到20×30，是因為，20×20，不夠ie8顯示這麼寬的dashed線型，那4個點也會消失的~



下面就是最有趣的地方了，當DIV的尺寸變成20×40，線寬如圖所示，結果，ie8和ie9是可以合體的！！！它們的合體可以組成一個完整的獨一無二的solid框！一像素都不差~



當將DIV的尺寸加到的89×39的時候，ie8才完全顯示出dashed框，並且此時chrome會突然變得和safari不同。



好了，也算的上是一輪瀏覽器的探索了。或者說消遣，再或者說無用工。因為沒有結論，只有現象，而且還是無用的現象。但仍然希望這能勉強算的上是塊磚頭，期待高見


文章提供: BAYSTARS DESIGN網頁設計公司

漂亮的大背景圖片導航欄CSS & jQuery

在這個教程中我們學習如何製作擁有大塊背景的導航欄。主要的想法如果有三個列表項但包含不同的背景，當你切換哪個選項背景就隨之變換的效果，當然是包含動畫效果的。導航欄也包括子菜單，每欄子菜單都擁有各自的不同顏色背景。


View Demo

Step1. 創建HTML

程序代碼

    

        
• 
              Home
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
        
• 
              About Me
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
        
• 
              Contact
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
    

Step2. 創建CSS

程序代碼

.menuWrapper{
width: 797px;
font-size: 14px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: normal;
line-height: 1.45em;
position: relative;
margin: 20px auto;
background-position: 0 0;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu{
width: 797px;
list-style: none;
overflow: hidden;
}
ul.menu > li{
width: 265px;
height: 542px;
float: left;
border-right: 1px solid #444;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu > li.last{
border:none;
}
.bg1{
background-image: url(../images/1.jpg);
}
.bg2{
background-image: url(../images/2.jpg);
}
.bg3{
background-image: url(../images/3.jpg);
}
ul.menu > li > a{
width: 265px;
float: left;
margin-top: 450px;
text-align: center;
line-height: 50px;
color: #ddd;
background-color: #333;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
font-weight: bold;
}
ul.menu > li ul{
width: 100%;
height: 110px;
list-style: none;
float: left;
margin-top: -180px;
padding-top: 20px;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu > li ul li{
display: none;
}
ul.menu > li ul.sub1{
background-image: url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
background-image: url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
background-image: url(../images/bg3sub.png);
}
ul.menu > li ul li a{
color: #fff;
text-decoration: none;
line-height: 30px;
margin-left: 20px;
font-size: 12px;
}
ul.menu > li ul.sub1 li{
display: block;
}
ul.menu > li ul li a:hover{
color: #BBB;
text-decoration: underline;
}

Step3. 插入jQuery和腳本包

程序代碼

腳本:
$(function() {
    /* position of the

that is currently shown */ 當前li位置顯示
    var current = 0;

    var loaded  = 0;
    for(var i = 1; i <4;   i)
        $('').load(function(){
              loaded;
            if(loaded == 3){
                $('#bg1,#bg2,#bg3').mouseover(function(e){

                    var $this = $(this);
                    /* if we hover the current one, then don't do anything */ 瀏覽當前的一個
                    if($this.parent().index() == current)
                        return;

                    /* item is bg1 or bg2 or bg3, depending where we are hovering */ b1 b2 b3取決於自己瀏覽
                    var item = e.target.id;

                    /*
                    this is the sub menu overlay. Let's hide the current one
                    if we hover the first

or if we come from the last one,
                    then the overlay should move left -> right,
                    otherwise right->left
                     */ 子菜單的狀態，用來隱藏當前選項
                    if(item == 'bg1' || current == 2)
                        $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
                            $(this).find('li').hide();
                        });
                    else
                        $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
                            $(this).find('li').hide();
                        });

                    if(item == 'bg1' || current == 2){
                        /* if we hover the first

or if we come from the last one, then the images should move left -> right */
                        $('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
                        move(1,item);
                    }
                    else{
                        /* if we hover the first

or if we come from the last one, then the images should move right -> left */
                        $('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
                        move(0,item);
                    }

                    /*
                    We want that if we go from the first one to the last one (without hovering the middle one),
                    or from the last one to the first one, the middle menu's overlay should also slide, either
                    from left to right or right to left.
                     */
                    if(current == 2 && item == 'bg1'){
                        $('#menu .sub' parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
                    }
                    if(current == 0 && item == 'bg3'){
                        $('#menu .sub' parseInt(current 2)).stop().animate({backgroundPosition:"(266px 0)"},300);
                    }

                    /* change the current element */
                    current = $this.parent().index();

                    /* let's make the overlay of the current one appear */

                    $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
                        $(this).find('li').fadeIn();
                    });
                });
            }
        }).attr('src', 'images/' i '.jpg');

    /*
    dir:1 - move left->right
    dir:0 - move right->left
     */
    function move(dir,item){
        if(dir){
            $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
            $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
            $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
                $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
            });
        }
        else{
            $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
                $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
            });
            $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
            $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
        }
    }
});

Download


文章提供: BAYSTARS DESIGN網頁設計公司

10個糟糕的IE Bug及其修復

國外有很多優秀的文章可以用來學習，決定花些時間翻譯。並不知道這篇文章有沒有人翻譯過，原文名 10 Awful IE Bugs and Fixes，希望能有更多人能看到這些優秀的文章。外國人很幽默，所以也就全文翻了。高手繞道

以下為譯文：

列舉了10個常見的IE bug和解決方法。相信這將能夠幫助你減少調試IE佈局不一致時花掉的時間。

作者：kevin

簡介

在處理IE方面每個人都有他們自己的故事。作為一個開發者不得不面對大量的IE的古里古怪的問題並且有的時候你只是想用頭撞牆。但是隨著時間的推移，慢慢吃一塹長一智（有些時候那不是的錯，是IE的錯！）並且開始接受和理解IE的怪異行為。不得不這樣因為仍然有數量可觀的IE6用戶。最好的做法是一開始就不斷的從不同的瀏覽器測試你的網站。從一開始就解決佈局問題要比在數千行html和css代碼之後容易的多。

有很多運動在抗議IE6，支持它的是大多數web專家和看起來不怎麼關心的普通用戶。所以，現在能做什麼？不得不繼續挖掘來解決IE6的問題。但是，等一下，有一個振奮人心的消息。基於w3cschool的月度報表，IE6的用戶這些年已經減少了一些。從2006年6月的60.3%到現在2009年9月的13.6%。按照這種比例，應該能在2010年年底的時候放棄IE6(譯註：國外的情況還真是一片大好啊~。~)

好了，回到現實，已經列出了全部之前遇到的問題作為未來參考的列表。相信這將能夠幫助你減少調試IE佈局不一致時花掉的時間。

1、IE6 幽靈文本(Ghost Text bug)

在寫本文之前，遇到了這個bug。它相當的古怪和滑稽。一塊不知哪來的重複的文本，被IE6顯示在靠近原文本的下面。(譯註：也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。無法解決它，所以搜索它，果然，這是另一個IE6的bug。

對此有許多解決方法，但是沒有一個對的例子有效(因為網站的複雜性無法使用其中的一些方法)。所以使用了hack。在原文本之後增加空格看起來能解決這個問題。

但是，從 Hippy Tech Blog 那裡瞭解到，問題背後的原因是由於html註釋標籤。IE6不能正確的渲染它。下面是他建議的解決方案列表：

解決方法：

1. 使用標籤包圍註釋
2. 移除註釋
3. 在前浮動上增加樣式 {display:inline;}
4. 在適當的浮動的div上使用負邊距
5. 在原文本增加額外的 (比如10個空格) (hacky way)

2、相對位置和溢出隱藏(Position Relative and Overflow Hidden)

這個問題遇到過很多次，當時正在準備一個JQuery的教程，因為使用了很多overflow hidden來達到想要的佈局。
問題發生在當父元素的overflow被設置成hidden並且子元素被設置成position:relative。
CSS-Trick有一個很好的例子來演示這個bug。position:relative and overflow in internet explorer

解決方法：

為父元素增加 position:relative;

3、IE的最小高度(Min-Height for IE)

這很簡單，IE忽略min-height屬性。你可以用下面的hack來修復它。感謝Dustin Diaz。

這個解決方法在IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2里都工作的很好。

解決方法：

程序代碼

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}

4、Bicubic圖像縮放(Bicubic Image Scaling)

你會喜歡這個的。IE那糟糕圖像縮放讓你很困擾？如果你拿IE和其他瀏覽器比較，IE縮小的圖像看起來不如其他瀏覽器。



解決方法：

程序代碼

img { -ms-interpolation-mode: bicubic; }

5、 PNG透明(PNG Transparency)

猜每個人都知道這個，但仍把它列在這裡，作為以後的參考。
所以如果你想要使用透明圖像並且GIF不能給你想要的質量，你會需要這個對PNG的hack。你必須意識到，如果你使用一張PNG圖像作為背景，你將不能設置背景的位置。

解決方法：

程序代碼

img {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

6、 IFrame透明背景 (IFrame Transparent Background)

在firefox和safari裡你應該不會遇到這個問題因為默認情況下，iframe的背景被設置為transparent，但是在IE裡，卻不是如此。你需要用到allowTransparency 屬性並且加入下面的CSS代碼來達成目的。

解決方法：

程序代碼

/* in the iframe element */


/* in the iframe docuement, in this case content.html */
body {
    background-color:transparent;    
}

7、禁用IE默認的垂直滾動條(Disabled IE default Vertical Scroll bar)

默認情況下，即使內容適合窗口大小，IE(譯註：IE6/7)也會顯示垂直滾動條。你可以使用overflow:auto，讓滾動條只在你需要時出現。

程序代碼

html {
    overflow: auto;
}

8、:hover偽類(:hover Pseudo Class)

IE只支持元素的 :hover偽類。你可以使用jQuery的hover event來達到相同效果。

解決方法：

程序代碼

/* jQuery Script */
$('#list li').hover(

    function () {
        $(this).addClass('color');
    },

    function() {
        $(this).removeClass('color');
    }
);

/* CSS Style */
.color {
    background-color:#f00; 
}

/* HTML */  

      
• Item 1
      
• Item 2
      
• Item 3
  

9、盒模型Hack(Box Hack Model)

這是IE裡最熱門的bug了。基本的理解是，IE計算寬度(width)的方式不同。基於w3c標準，一個元素總寬度應該是：
總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是，IE計算寬度時沒有加上填充和邊框：
總寬度 = margin-left + width + margin-right

更多的細節，請參考這個鏈接：Internet Explorer和CSS盒模型詳細解釋

解決方法：

使用w3c的標準兼容模式。IE6或者之後的版本能基於w3c的標準計算，但是你仍舊會在IE5中遇到問題。

或者你可以用CSS Hack來解決這個問題。所有標準兼容的瀏覽器都能讀取w\\idth:180px 除了IE5。

程序代碼

#content {
    padding:10px;
    border:1px solid;
    width:200px;
    w\\idth:180px;
}

10、 雙倍邊距bug(Double Margin Bug Fix)

如果你有一個分配有左/右邊距的浮動元素，IE6會使得邊距雙倍化。比如，margin-left:5px 將會變成10px。你可以通過對浮動元素添加display:inline來解決這個問題。

解決方法：

程序代碼

div#content {
    float:left;
    width:200px;
    margin-left:10px;

    /* fix the double margin error */
    display:inline;
}

文章提供: BAYSTARS DESIGN網頁設計公司