Rev. 2.73

hardware-04-20100127.jpg

한국시간 새벽 3시 애플이 예상대로 태블릿을 발표했습니다. 사양은 1GHz Apple A4 프로세서, 9.7 인치 LED-백라이트 멀티-터치 디스플레이, 1024 x768 해상도, 16G - 64G 플래시 스토리지, Wi-Fi 802.11 n, 3G, Bluetooth 2.1 + EDR, 10 시간 연속 사용, 대기시간 1개월, 두께 0.5 인치, 무게 0.73 kg 입니다. 아이폰 OS 기반 OSX를 채용하여 아이폰 앱과도 호환된다고 합니다. 메모리 크기에 따라 3가지 제품으로 구분되며 3G를 지원하는 기종의 가격은 각각 $629, $729, $829이고 그렇지 않은 기종의 가격은 각각 $499, $599, $699입니다. 뭔가 확 구미가 당기지는 않네요.

Comments

Román Cortés씨는 CSS 트릭으로 완전 골때리는 시도를 했습니다. 위 화면에서 스크롤을 오른쪽으로 이동해 보세요. 콜라 캔에 굴러갑니다. 이미지 한장을 영역별로 정교하게 매핑하여 입체적인 느낌을 표현했습니다. background-attachmentbackground-position 속성 그리고 몇몇 CSS3 트릭으로 만들어진 것입니다.

Comments

4년만에 블로그를 대대적으로 성형하고 있습니다. 최근 코멘트 출력부를 과감히 수정했는데 이곳의 스타일을 풍선말과 유사한 느낌을 주기 위해서 화살표 부분을 순수 CSS만으로 작성했습니다. 날로 먹겠거니 생각했는데 예상했던 것 이상으로 까다롭더군요. 그래서 요소의 보더와 색상 CSS 속성을 이용한 삼각형 사용방법에 대하여 정리해 보았습니다.

예제 :

삼각형이 그려지는 원리는 간단합니다. 요소의 스타일에 보더 속성을 두껍게 적용하면 모서리로부터 만들어지는 사선과 색상을 교묘히 조합하여 만들어내는 일종의 트릭입니다. 이해를 돕기위해 여기에 몇몇 예제를 작성했습니다. :

<div class="css-arrow-multicolor"></div>

.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}

요소의 높이와 너비는 0입니다. 그리고 보더의 너비는 20픽셀이며 각각 다른 색상을 지정했을 때 위와 같은 결과를 볼 수 있습니다. 그리고 약간의 창의력을 발휘하면 다양한 모양을 만들어 낼 수 있습니다. :

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

border-style:double;

이제 응용해 봅시다. :

Buongiorno!
<div class="chat-bubble">
  Buongiorno!
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
  border-color: #666666 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-22px;
  left:30px;
}

.chat-bubble-arrow {
  border-color: #EDEDED transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:30px;
}

문제는 보더 색상을 투명으로 지정할 수 없는 IE6 에서 발생합니다. 아래와 같은 CSS 핵을 이용하여 처리할 수 있습니다.

/* IE6 */
.chat-bubble-arrow {
  _border-left-color: pink;
  _border-bottom-color: pink;
  _border-right-color: pink;
  _filter: chroma(color=pink);
}

Comments