2016-06-14 5 views
2

쿠폰 정보로 내 고객에게 이메일을 보내고 있습니다. 저는 그래픽으로 바우처를 표현하고 싶습니다.이메일의 모양 - 좋은 습관?

테이블을 스타일링하는 아이디어가 떠올랐다. (이메일 클라이언트에서 테이블이 잘 수신 됨) - 내 솔루션의 코드 스 니펫을 확인한다.

대부분의 이메일 클라이언트에서 기본적으로 사용 중지되어 있으므로 이미지를 보내고 싶지 않습니다.

제 질문 사항 : 메일 클라이언트와 프로그램에 의해 잘 받아 들여 지거나 그러한 연습을 삼가해야합니까?

#badge-ribbon { 
 
    position: relative; 
 
    background: red; 
 
    height: 100px; width: 100px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
    border-radius: 50px; 
 
} 
 
#badge-ribbon:before, #badge-ribbon:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-bottom: 70px solid red; 
 
    border-left: 40px solid transparent; 
 
    border-right: 40px solid transparent; 
 
    top: 70px; 
 
    left: -10px; 
 
    -webkit-transform: rotate(-140deg); 
 
    -moz-transform: rotate(-140deg); 
 
    -ms-transform: rotate(-140deg); 
 
    -o-transform: rotate(-140deg); } 
 
#badge-ribbon:after { 
 
    left: auto; 
 
    right: -10px; 
 
    -webkit-transform: rotate(140deg); 
 
    -moz-transform: rotate(140deg); 
 
    -ms-transform: rotate(140deg); 
 
    -o-transform: rotate(140deg); 
 
}
\t <table id="badge-ribbon">

+0

아스키 아트 버전을 일반 텍스트 대체에 포함시킬 수 있습니다. –

+0

가끔 문제가 MS Outlook에서 지원되지 않습니다. –

답변

3

CSS를 제공하기 위해 대체 태그를 사용하는로드하지에 대한 대체는 거의 더 흥미로운 또는이었다 1998 년 CSS보다 사용할 수 없습니다에 대한 CSS 1.8 수준이다. 가장 좋은 방법은 style 요소와 table 디자인 구조를 사용하는 HTML 코드 오버레이가 포함 된 간단한 전자 메일을 보내는 것입니다. CSS 3 지원은 거의 존재하지 않으며 HTML CSS 지원은 일반적으로 CSS가 표시되는 방식에 따라 매우 고르지 고 고르지 만, 일부는 style 요소로 작동하지만 CSS 스타일 시트는 첨부하기 때문에 이미지와 큰 색상 블록이 가장 좋은 방법입니다 일반적으로 HTML 코드에서 분리됩니다.

CSS3는 일반적으로 이메일 클라이언트에서 지원되지 않습니다.

밝은 대담한 색상 블록 및/또는 이미지와 깨끗한 이메일을 보내고 아름다운 HTML5 및 CSS3에서 동일한 메시지를 보여주는 웹 페이지에 대한 깨끗한 링크를 만드십시오.

4

나는이 기술을 사용하지 않도록이 CSS의 많은 Outlook 클라이언트에서 작동하지 않습니다와 Gmail에 포함 된 CSS를 제거하는 좋은 기회가 같은 이미지로 가고 싶어 완전히. 이미지가 헤드 라인/사본을 이메일

Campaign Monitor CSS support guide