2014-01-14 1 views
3

나는 내가 발견CSS3를 사용하여 교실 그린 보드 효과를 만드는 방법은 무엇입니까?

enter image description here

아래의 이미지처럼 쓰기에 만에 가까운 글꼴을 CSS를 사용하여 교실 또는 녹색 효과 (백악질 분말 효과가 바로 녹색)을 달성하고자하는 그린 보드 색상을 선택하고 div의 배경으로 적용했지만 모든 것이 평범하고 균일하게 보입니다. 이는 비현실적입니다.

CSS를 사용하여 희끄무레 한 녹색 효과를 얻을 수 있습니까? 이미지를 사용하고 싶지 않습니다. 당신은 아마 사용하여 그라디언트 것을 할 수

+0

먼저 해봤 니? –

+1

CSS에서 이와 비슷한 것을 얻을 수 있다고해도 (나는 본 적이 한 번도 없다) 엄청난 양의 코드가 필요합니다. 실용적이지 않습니다. 가벼운 bg 이미지는 여기에서 훨씬 더 좋은 옵션입니다. –

+0

코드를 요청하는 질문은 ** 해결 된 문제에 대해 최소한의 이해를 보여 주어야합니다 **. 시도한 해결책, 실패한 이유 및 예상되는 결과를 포함시킵니다. 참고 : [Stack Overflow question checklist] (http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist). – Antony

답변

2
당신이 ... CSS3 그라디언트를 사용하는 아래의 코드를 사용할 수 있습니다

.. 이미지가 약간의 질감 효과를 포함하기 때문에 완벽 같은 이미지 아니다

.greenboard {background: #63856a; /* Old browsers */ 
background: -moz-radial-gradient(center, ellipse cover, #63856a 1%, #3c5a40 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#63856a), color-stop(100%,#3c5a40)); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, #63856a 1%,#3c5a40 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, #63856a 1%,#3c5a40 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, #63856a 1%,#3c5a40 100%); /* IE10+ */ 
background: radial-gradient(ellipse at center, #63856a 1%,#3c5a40 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63856a', endColorstr='#3c5a40',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
} 

...

3

당신이 할 수있는 텍스트 색상에 반투명 한 흰색 색 인 rgba을 결합한 다음 반투명 한 흰색을 사용하여 text-shadow을 사용하여 분필의 입도를 투명하게 에뮬레이션하는 '광선'을 만들어 매우 가까이에옵니다.

Working sample here.

변환과 원근법을 영리하게 사용하면 사람들이 희미하게 일관된 크기와 방향으로 화이트 보드에 쓰는 효과를 에뮬레이트 할 수 있으며 텍스트는 대개 왼쪽에서 오른쪽으로 수렴됩니다.

Funkier sample here. 또는 tad more transparent으로 지정하십시오. 그것을 가지고 놀자 :)

관련 문제